Question

我正在处理一次显示数百张图片的页面。我正在使用Lazy Load plugin来快速加载页面。一切都运行得很好但是我添加了一个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 Asynchronous Image Loader (JAIL)。作者将其写成对此问题的直接回应：Reasons why I wrote the plugin Jquery Asynchronous Image Loader (JAIL)。

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

试试这个：

使用ID“trigger”
设置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>

你必须修补一下才能完美地完成这项工作，但上面的内容应该让你开始。

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

1 个答案: