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

【问题标题】：Trigger lazy loading of images after images have been resized调整图像大小后触发图像延迟加载
【发布时间】：2012-04-10 23:16:56
【问题描述】：

我正在处理一个同时显示数百张图像的页面。我正在使用Lazy Load plugin 让页面快速加载。一切正常，但是我添加了一个 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();}
});

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

谁能看出我做错了什么？

【问题讨论】：

标签： jquery lazy-loading

【解决方案1】：

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

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

This example 显示一个 li 触发图像加载。您可能可以修改您的代码来做同样的事情。

试试这个：

向您的页面添加一个隐藏的 div，其 id 为“触发器”
设置您的 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>

您必须四处修补才能使这项工作完美地为您服务，但以上内容应该可以帮助您入门。

【讨论】：