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

Question

我正在处理一次显示数百张图像的页面.我正在使用Lazy Load插件来允许页面快速加载.一切都运行得很好但是我添加了一个jQuery UI Slider,允许用户通过拖动手柄来放大/缩小图像.如果用户缩小图像,那么过去在图像下方的图像可能已经移动到可见区域.由于未发生滚动,因此不会加载图像.

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

代码非常简单:

这是连接插件的代码.

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

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

试试这个：

1. 添加一个隐藏的div到你的页面，id为“trigger”
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>

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