zoukankan      html  css  js  c++  java
  • 关注电子商务网站开发《简单易用的JQUERY插件图片延时加载插件(lazyload)》

    图片延时加载(lazyload)是网站常用的一种手段,目的是为了减少页面加载时向服务器的请求数,这里分享一款支持大部分情况下(如IPAD浏览、异步加载、某个范围加载)的图片延时加载插件。

    代码及效果

    先贴代码:

    复制代码
      $.extend({
                imgLoad: function (options) {
                    options = $.extend({
                        container: "img",//集合
                        time: 600,//滚动时定时刷新时间
                        attribute: "src2" //保存原图地址的自定义属性
                    }, options);
                    var container = options.container, n = n || 0, tim, _time = 0;
                    Load();
                    function GetHeight() {
                        var d = document,
                            y = (navigator.userAgent.toLowerCase().match(/iPad/i) == "ipad") ? window.pageYOffset : Math.max(d.documentElement.scrollTop, d.body.scrollTop);
                        return d.documentElement.clientHeight + y - n;
                    }
                    function Load() {
                        var hg = GetHeight();
                        $(container).each(function () {
                            var _s2 = $(this).attr(options.attribute), t = $(this).offset().top;
                            if (_s2 && t < hg && t > hg - 1000) {
                                $(this).attr("src", _s2).removeAttr(options.attribute)
                            };
                        })
                    };
                    if (!!window.ActiveXObject && !window.XMLHttpRequest)
                    { _time = options.time }
                    $(window).scroll(function () {
                        clearTimeout(tim);
                        tim = setTimeout(function () { Load(); }, options.time);
                    });
                }
            })
    复制代码

    点击这里查看效果

    参数说明

    参数container:container表示要遍历的容器,默认是IMG,也就是遍历整个页面的所有IMG。如果想只延时加载某个范围内的图片,可以修改此参数,如我想异步加载面代码中ul中的图片,那么只需要设置参数container的值为".imgContainer li img"即可。

    复制代码
    <Script type="javascript/text">
        $(function(){
              $.imgLoad({ container: ".imgContainer li img"});
        })
    </Script> 
    <ul class="imgContainer">
                <li>
                    <img src2="X1.JPG" />
                </li>
                <li>
                    <img src2="X2.JPG" />
                </li>
                <li>
                    <img src2="X3.JPG" />
                </li>
                
            </ul>
    复制代码

    参数time:参数time表示延时加载的时间,默认是600毫秒,就是说当页面滚动到该范围时0.6秒后该图片就会显示,设置time为1秒:

    <Script type="javascript/text">
    $(function(){
         $.imgLoad({"time":1000 });
    })
    </Script>

    参数attribute:此参数为存储图片路径的参数,在图片设置SRC属性之前,要把真实的图片路径存在某个属性里,默认为SRC2,可以把此属性设置为任意:

    复制代码
    <Script type="javascript/text">
        $(function(){
            $.imgLoad({ attribute: "myAttr"});
        })
    </Script>
    <body>
         <img myAttr="1.jpg"/>
    </body>
    复制代码

    基本参数已经讲完了,关于调用也是相当简单的。这里还有一个问题,由于延时加载的方法是写在页面滚动的事件里,也就是代码中的

     $(window).scroll(function () {
                        clearTimeout(tim);
                        tim = setTimeout(function () { Load(); }, options.time);
                    });

    那么如果直接刷新页面浏览器会直接跳到当前停留的位置,但是有的浏览器没有触发scroll事件,这种情况下的解决办法在页面加载完成后使用scrollTop方法,让浏览器向上1个像素:

    jQuery(window).scrollTop(1)

    这样这个插件就讲完了,相对于网上的一些插件应该算是简单实用的了,欢迎大家踊跃讨论。

  • 相关阅读:
    通讯录封装实现
    简单通讯录的实现 main..h .m文件全部
    iOS 开发 OC编程 字典和集合 排序方法
    iOS 开发 OC编程 数组冒泡排序.图书管理
    iOS 开发 OC编程 属性和字符串练习
    iOS 开发 OC编程 属性和字符串
    iOS 开发 OC编程 便利构造器以及初始化方法
    iOS 开发 OC编程 方法的书写
    IOS 开发 OC编程 类和对象
    iOS 开发 c语言阶段考试题
  • 原文地址:https://www.cnblogs.com/aimyfly/p/3039438.html
Copyright © 2011-2022 走看看