jQuery lazyload plugin

Question

Hi there,

I've got a page that contains a list with about 100 images, and i dont want that the browser has to load all of it if the users only views approx. 10 of it.

So i've tried the jQuery.lazyload plugin on my page.

If i write:

$( function() {
    $('.list li img').lazyload( { placeholder: 'n.gif' } );
});

for the code:

<ul class="list">
    <li><img src="myawesomeimage.jpg"></li>
</ul>

The browser loads the images before the lazyload is applied to the images. I tried lazyload below the image tags without the document-ready construct - same results

I proxied the image-load through an php script that logs the access to the images - and it still loads everything at the beginning...

Anyone has an idea?

Answer 1

Are you testing this locally or over an internet connection. The only thing I can think of is that if you're developing locally or on a local network, the images will load so fast that the plugin will not execute until after they've already loaded. One way to debug this might be to use the Firebug network tab. Add an $.ajax call to nowhere important before the execution of lazy load and then check out the network tab to see when the AJAX request goes out compared to when the images are loaded. If all is well you'll see the AJAX request before the image requests. If you don't see any image requests, make sure you're viewing the "All" group.

Also, make sure you have caching disabled when testing all of this because otherwise the browser will immediately load the images from cache.

Finally, I noticed that the plugin creator mentions that it doesn't work in IE when paired with jQuery 1.3. What browser are you testing in?

Answer 2

Make sure you optimize your photos for the web or create smaller files for preview and then allow to download the original file if necessary.

Answer 3

I have found different browsers have different behaviors. Some browsers will preload all the images even with lazyload in place.

If you can control the HTML generation, there is an absolute solution to this.

Output your image tags like so:

<img src=placeholder.png original=myimage.png>

In other words - make the src attribute point to some placeholder image (or omit it entirely), and point the original attribute point to the image you want lazy-loaded.

This will cause the browser to pre-load the placeholder image (best to use just 1 placeholder for all your img tags), and then wait to load the image pointed to by the original attribute. This works on all browsers in my experience.