jquery - 调整图像大小后触发图像延迟加载

Question

我正在开发一个可以同时显示数百张图像的页面。我正在使用Lazy Load plugin以允许页面快速加载。一切工作都很完美，但是我添加了一个 jQuery UI slider ，允许用户通过拖动 handle 来放大/缩小图像。如果用户缩小图像，那么以前位于首屏下方的图像现在可能已移至可见区域。由于未发生滚动，因此未加载图像。

我添加了一个事件来在拖动调整大小 handle 时触发加载，但它会导致加载所有图像，而不仅仅是那些已进入可视区域的图像。

代码非常简单:

这是连接插件的代码。

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

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

这是触发 slider 加载的代码

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

我正在寻找的是一种仅加载现在可见的图像而不是页面上的所有图像的方法。

有人能看出我做错了什么吗？

Answer 1

这可能是插件的问题。互联网上有很多关于这个插件在现代浏览器中不起作用的讨论。

看看JavaScript Asynchronous Image Loader (JAIL) 。作者写了它作为对这个问题的直接回应:Reasons why I wrote the plugin Jquery Asynchronous Image Loader (JAIL) .

This example显示触发图像加载的 li。您也许可以修改代码来执行相同的操作。

试试这个:

1. 向页面添加一个 ID 为“trigger”的隐藏 div
2. 设置 ResizeImages 函数来模拟触发 DOM 对象的点击
3. 更改延迟加载代码以使用 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>

您必须进行一些修改才能使其完美地适合您，但上述内容应该可以帮助您入门。