jquery - 延迟加载插件

Question

我正在使用 jQuery Lazy Load 在页面上加载缩略图，每页有大约 100 多个缩略图的列表。这个插件运行得非常完美，直到我引入了插件“快速分页”来一次显示九个缩略图并为用户提供下一个和上一个缩略图。

当单击“下一个”或“上一个”时，您会看到灰色占位符图像，因为页面滚动不再是一个因素。

我尝试了不同的事件，甚至创建了自己的事件，这只会加载所有缩略图，甚至是低于(下一个和上一个)中阈值的缩略图。

有没有办法触发滚动事件？就像这个人所做的那样 > http://blog.3circlestudio.com/development/how-to-use-lazy-load-with-easy-slider-1-7/

我也尝试过这个，但没有运气。

$('.thumbs').lazyload({ placeholder:'/thumbnail.gif' });

无需快速分页和滚动有关作品!

$('#thumbnails').paginate({ pager: $('div#pagination') });

引入分页功能可以生成一个包含 9 个缩略图的列表，从而打破了延迟加载。我想我要问但无法弄清楚的是每次单击“下一步”链接时如何调用缩略图。

Answer 1

我刚刚弄清楚并且它正在工作!当调用下一个和上一个时，我在快速分页中创建了一个函数。在此函数中，我插入了以下内容。

var scrollTop = function() {
    $('html, body').animate({scrollTop:0}, 'slow', function() {
        $(window).trigger('scroll');
    });
}

通过将动画与滚动顶部一起放置，我解决了滚动页面的问题，并通过放置 $(window).trigger('scroll');在动画中，它会触发滚动并加载下一组照片。希望这对其他人来说有意义 - 对我而言，它正在发挥作用。

是的!