zoukankan      html  css  js  c++  java
  • 网页浏览 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>

  • 相关阅读:
    第二章IntelliJ IDEA 安装目录的核心文件讲解
    第一章首次运行 IntelliJ IDEA 示例
    struts json ajax整理
    关于struts2文件下载
    mybatis深入资料
    MyBatis获取插入记录的自增长字段值
    好久没有更新博客了,今天更新了几篇
    枚举Enum 的常用方法
    angular js中ng-model时间格式化
    input框输入完回车即可查询事件
  • 原文地址:https://www.cnblogs.com/lightsong/p/6995649.html
Copyright © 2011-2022 走看看