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)

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

  • 相关阅读:
    AOP 和 前置通知,后置通知
    使用Spring 简化MyBatis
    核心一:DI
    环境搭建及创建对象方式及赋值(注入)
    核心一:IoC
    Spring框架简介
    判断两个矩形是否相交的4个方法
    计算旋转角度
    浅析adb命令
    如何选择开源许可证?
  • 原文地址:https://www.cnblogs.com/aimyfly/p/3039438.html
Copyright © 2011-2022 走看看