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

Question

我正在处理一个同时显示数百张图像的页面。 我正在使用延迟加载插件来允许页面快速加载。 一切都运行良好，但是我添加了一个jQuery UI滑块，允许用户通过拖动手柄来放大/缩小图像。 如果用户缩小图像，那么以前位于折叠下方的图像现在可能已移动到可见区域。由于未发生滚动，因此不会加载图像。

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

代码非常简单：

这是连接插件的代码。

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

这是从滑块触发加载的代码

$( "#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）。 作者写它作为对这个问题的直接回应：我写插件的原因 Jquery 异步图像加载器 （JAIL）。

此示例显示触发图像加载的 li。 您可能可以修改代码以执行相同的操作。

试试这个：

1. 使用ID"触发器"向页面添加隐藏的div
2. 设置调整大小图像函数以模拟对触发器 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>

您必须进行修补才能使其完美地为您工作，但以上内容应该可以让您入门。