lazy-loading - 图像经过调整后,jquery触发延迟加载图像

  显示原文与译文双语对照的内容
67 2

我正在处理一个页面,它同时显示几百张图片。我正在使用 延迟加载 插件插件,以允许页面快速加载。所有的工作都是完美的,但我添加了一个 jQuery UI slider 允许用户扩大/缩小图像。如果用户收缩图像,那么过去的图像可以能已经经被移到了可以见区域。由于没有发生滚动,所以图像未加载。

当拖动调整大小柄时,我添加了一个事件,但它导致所有图像加载而不仅仅是输入的。

代码非常简单:

下面是连接插件的代码。

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

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

谁能看到我在做什么?

时间:原作者:0个回答

86 2

这可能是插件的问题。有很多关于这个插件的讨论在现代浏览器中无法使用。

看一下 JavaScript异步映像加载器( JAIL )作者把它写成了对这个问题的直接反应:为什么我写了异步映像加载器( JAIL )的原因。

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

试试这个

  • 将隐藏的div添加到你的页面,其中包含 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>

你必须修改一下,让这个工作完美,但是 above 应该让你开始。

原作者:
...