Question

I’m working on a page that displays several hundred images at once. I’m using the Lazy Load plugin to allow the page to load quickly. Everything is working perfectly however I’ve added a jQuery UI Slider to allow users to enlarge/shrink images by dragging a handle. If users shrink images then it is possible that images that used to be below the fold have now been moved into the visible area. Since scrolling has not occured, the images are not loaded.

I added an event to trigger loading when the resize handle is dragged but it is causing ALL images to load and not just those that have entered into the viewable area.

The code is pretty straightforward:

Here is the code to wire up the plugin.

$("#pplImages.lazy").lazyload({event : "LoadVisibleImages"});

function LoadVisibleImages() {
    $("#pplImages.lazy").trigger("LoadVisibleImages");
}

And here is the code that triggers the loading from the Slider

$( "#slider" ).slider({
    min: 25,
    max: 125,
    value: 100,
    slide: function( event, ui ) {
    ResizeImages(ui.value);
}
}).slider().bind({
    slidestop   : function(event,ui) {LoadVisibleImages();}
});

What I’m looking for is a way to load ONLY those images that are now viewable and not ALL images on the page.

Can anyone see what I’m doing wrong?

Answer 1

This could be an issue with the plugin. There is a lot of discussion on the interwebs about this plugin not working in modern browsers.

Take a look at JavaScript Asynchronous Image Loader (JAIL). The author wrote it as a direct response to this problem: Reasons why I wrote the plugin Jquery Asynchronous Image Loader (JAIL).

This example shows an li triggering the image loading. You can probably modify your code to do the same.

Try this out:

1. Add a hidden div to your page with the id “trigger”
2. Set your ResizeImages function to simulate a click on the trigger DOM object
3. Change your lazy load code to use the JAIL plugin and set it to load images whenever the trigger object is clicked.

Your code can look something like this:

JavaScript

$("#pplImages.lazy").jail({
    selector:'#trigger', 
    event: 'click'
});

$( "#slider" ).slider({
    min: 25,
    max: 125,
    value: 100,
    slide: function( event, ui ) {
    ResizeImages(ui.value);
}
}).slider().bind({
    slidestop   : function(event,ui) { 
        $('#trigger').click(); //Notice this simulated click event
    }
});

HTML (just add this to your page)

<div id="trigger" class="hidden"></div>

You’ll have to tinker around to make this work perfectly for you but the above should get you started.