延迟加载：如何使用jquery创建延迟加载html页面

Question

我希望有一个页面只有当它通过滚动到达该部分时加载内容，就像pinterest网站正在做的那样。

实现它的设计是什么？还是有插件可以做到这一点？请帮忙。

Answer 1

$(window).on( "scroll" , function() {

     var $document = $(document);
     var $window = $(this);

     if( $document.scrollTop() >= $document.height() - $window.height() - 400 ) {
         // do something
     }

 });

其中400是距离页面底部的偏移量。有插件可以做到这一点，但这是一些简单的代码。我建议使用underscorejs来限制此功能，因为每次滚动顶部更改时此函数都会触发。因此，对于每个像素，它将触发。通常我把它限制为每秒只运行60帧。

Answer 2

如果您想尝试，可以使用jQuery的Lazy Load插件：

http://www.appelsiini.net/projects/lazyload