网页浏览 infinite scroll效果知识

infinite scroll

类似一些网站， 例如京东搜索商品， 浏览到最后一页，自动加载新的商品。

一则可以加快首页响应速度， 二则减轻带宽和服务器荷载。 这么多商品信息一次性返回给客户端也是不可行的。

 

An infinite scrolling plugin for jQuery

https://github.com/pklauzinski/jscroll

http://jscroll.com/

 

jScroll is a jQuery plugin for infinite scrolling, written by Philip Klauzinski. Infinite scrolling; also known as lazy loading, endless scrolling, autopager, endless pages, etc.; is the ability to load content via AJAX within the current page or content area as you scroll down. The new content can be loaded automatically each time you scroll to the end of the existing content, or it can be triggered to load by clicking a navigation link at the end of the existing content.

An example of infinite scrolling is your Facebook "News Feed" page. You may notice that when you scroll to the bottom of this page, new content will often load automatically, or you will be given a link to "Older Posts" which will load more content when clicked.

 

demo： http://jscroll.com/

 

Recliner.js 

 

https://github.com/sourcey/recliner

 

Recliner is a super lightweight (1KB) jQuery plugin for lazy loading images, iframes and other dynamic (AJAX) content. Being lazy never felt so good, just hook it up, and start sippin' those margaritas!

The script was born out of necessity when one of our clients came to us with massive scroll lag on one of their media heavy mobile news sites. It turned out that lazy-load-xt was the culprit, so naturally we tested the other lazy load scripts out there but none of them met our simple criteria:

• Lightweight
• Sets stateful CSS classes on elements
• Ability to override event callbacks for custom behaviour
• Can load any dynamic content (images, iframes, AJAX)
• Mobile friendly
• Printer friendly

Recliner is currently used on some very high traffic sites, so it's well tested and production ready.

 

 demo：

https://sourcey.com/recliner/

 

 

代码示例：

 

 

 

其它：

https://github.com/metafizzy/infinite-scroll

20 jQuery Lazy Load Plugins for Improve Page Load Time

http://smashfreakz.com/2016/06/jquery-lazy-load-plugins/

 

 

如何实现infinite scroll？

https://www.quora.com/How-do-websites-only-load-part-of-the-page-and-then-load-more-as-you-scroll-down

检测位置， 发起ajax。

<script type="text/javascript">
$(document).ready(function(){
    var ajax_once = false;
    function last_msg_funtion()
    {
   
        var ID=$(".message_box:last").attr("id");
        $('div#last_msg_loader').html('<img src="Page on localhost">');
        $.post("welcome/index/get/"+ID,
        function(data){
            if (data != "") {
                $(".message_box:last").after(data);
            }
            $('div#last_msg_loader').empty();
        }).done(function(data) {
            /* use the data */
            ajax_once = false;
        });
    }; 
       
    $(window).scroll(function(){
        if (ajax_once)
        return;
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           last_msg_funtion();
        }
    });
});
</script>