5

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

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

代码非常简单：

这是连接插件的代码。

$("#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();}
});

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

谁能看到我做错了什么？

4

1 回答 1

1

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

看看JavaScript Asynchronous Image Loader (JAIL)。作者写它作为对这个问题的直接回应：我写插件 Jquery Asynchronous Image Loader (JAIL) 的原因。

这个例子显示了一个 li 触发图像加载。你可能可以修改你的代码来做同样的事情。

试试这个：

  1. 使用 ID“触发器”向您的页面添加一个隐藏的 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>

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

于 2012-04-10T15:16:56.193 回答