Trigger lazy loading images after changing images

Question

I am working on a page displaying several hundred images at once. I use the Lazy Load plugin to make the page load quickly. Everything works fine, but I added a jQuery UI slider so that users can zoom in / out by dragging the handle. If users compress images, it is possible that images that were previously below the crease are now moved to the visible area. Since scrolling did not occur, images are not loaded.

I added an event to load when dragging the size descriptor, but it causes the loading of ALL images, not just those that went into scope.

The code is pretty simple:

Here is the code for connecting the plugin.

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

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

And here is the code that starts the download 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 upload ONLY those images that are now viewable, not ALL the images on the page.

Can anyone see what I'm doing wrong?

Answer 1

This may be a problem for the plugin. There is a lot of discussion about interwebs that this plugin does not work in modern browsers.

Check out the JavaScript Asynchronous Image Loader (JAIL) . The author wrote this as a direct answer to this problem: Reasons why I wrote the JQuery Asynchronous Image Loader (JAIL) plugin .

, li . , , .

:

• div ""
• ResizeImages DOM .
• JAIL , .

:

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 ( )

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

, , .