LazyLoad插件 [英] LazyLoad Plugin

问题描述

我正在使用jQuery Lazy Load在页面上加载缩略图，我每页约有100多个缩略图.在我介绍该插件快速分页以一次显示九个缩略图并为用户提供下一个和上一个缩略图之前，该插件可以完美地工作.

I am using jQuery Lazy Load to load thumbnails on a page I have a list of about 100+ thumbnails per page. This plug-in works perfect, until I introduce the plug-in Quick Pagination to display nine thumbnails at a time and give users the next and previous.

单击下一个"或上一个"时，将获得灰色的占位符图像，因为滚动"页面不再是一个因素.

When one clicks on the Next or Previous, you get the gray placeholder image as the page Scroll is no longer a factor.

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

I tried different events and even created my own, this only loads all thumbnails even the ones below the threshold in the (next and previous).

是否有触发滚动事件的地方?像这个人一样>> http://blog.3circlestudio.com/development/how-to-use-lazy-load-with-easy-slider-1-7/

Is there away to trigger the scroll event? Like this person has done > http://blog.3circlestudio.com/development/how-to-use-lazy-load-with-easy-slider-1-7/

我也尝试过，没有运气.

I did try this as well and no luck.

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

没有快速分页和滚动about作品！

Without Quick Pagination and scrolling the about works!

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

引入分页功能可生成每张9张缩略图的列表，从而消除了延迟加载.我想我想问的是我每次点击Next链接时如何调用缩略图.

Introducing the paginate works to generate a list of 9 thumbnails per, breaks lazyload. I guess what I am asking and can not figure out is how to call the thumbnails each time I click on the Next link.

推荐答案

我刚刚弄清楚了，它正在工作！当调用Next和Previous时，我在Quick Pagination中创建了一个函数.在此函数中，我插入了以下内容.

I just figured it out and it is working! I created a function within in Quick Pagination when the Next and Previous are called. In this function I inserted the following.

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

通过将动画和滚动顶部一起放置，我解决了滚动页面的问题，并通过放置$(window).trigger('scroll');来解决此问题.在动画中，它会触发滚动并加载下一组照片.希望这对其他任何人都有意义-为了我的目的，它正在工作.

By placing the animate along with scroll top I fixed the issue to scroll the page, and by place $(window).trigger('scroll'); within the animate it triggers the scroll and loads the next set of photos. Hope this makes sense to anyone else - for my end it is working.

是的！

这篇关于LazyLoad插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！