CODEWITHSUNDEEP
javascriptjqueryhtmlimagelazy-loading
JCHASE11
JCHASE11

Reputation: 3941

Proper method for simple 'lazy loading' of images

I am building a web application that is extremely image heavy. A feature of it is an interactive timeline which allows the user to scroll through a series of years. Each year has a photo gallery with 20-50 images. I am looking for the best solution to hide images on load, and load them on demand (a click event). Here are a few options:

1) Use javascript to assign the data-src to the actual src on demand.

<img src="blank.png" data-src="images/real-image.jpg">

2) Place all images inside a div with display:none. I believe some browsers still load these images on load, so might not be a good idea

<div style="display:none">
  <img src="images/real-image.jpg">
</div>

3) Use a technique like lazyload. This plug, JAIL allows for images to be loaded after an event is triggered.

Thanks in advance!

Upvotes: 0

Views: 1066

Answers (2)

EZLearner
EZLearner

Reputation: 1834

I use the following technique:

// Contains Image path strings that can be loaded statically or dynamically
var imgs = [img1, img2, img3, img4];
var img = new Image();
img.style.cssText = "position: absolute; visibility: hidden; display: block";
document.body.appendChild(img);

for (var i = 0 ; i < imgs.length ; i++)
    img.src = imgs[i];

Each iteration posts an HTTP request for the image, which is later cached upon arrival.
This works for me. I load the string paths into the HTML using a server-side generation.

Upvotes: 0

Each Knee San
Each Knee San

Reputation: 31

Number one is good. Just but let src point to nowhere src=""or to a single placeholder image. If you need the image file, switch src with the real path, and the Browser loads it. Switch again for removal, then the file is fair game for the gargabe collector.
Number two will just hide but still load the image. Number three basically does what Number one does. (First post, no reputation, still hope I can help).

Upvotes: 3

Related Questions