JS实现图片延迟加载

最新推荐文章于 2024-10-26 20:57:37 发布

古月_见青

最新推荐文章于 2024-10-26 20:57:37 发布

阅读量786

点赞数

分类专栏： Web 文章标签： function 浏览器 null iframe xhtml delete

本文链接：https://blog.csdn.net/huliang7777/article/details/7440334

版权

Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、JS实现图片延迟加载

        1、引入jquery.lazyload.js文件
        2、然后将页面中需要延迟加载的图片进行一定处理，src就不是图片真正的路径，
        而是本地的一张默认的初始化图片，真正的图片的路径放在lazyload属性中
        3、这样就可以实现图片的延迟加载
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/          xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>t</title>
         <script type="text/javascript" src="jquery.lazyload.js"></script>
        </head>
        <body>
           <img src="本地图片路径" lazyload="网络上面需要下载的图片路径" height="48px"   width="48px"/>
        </body>
        </html>

二、延迟加载js代码：

/*
图片延迟加载原始版本
图片加载的顺序只能是从上到下，不能是可见区域的图片加载。
如果进行分页时，处于浏览器的底部，就根本没有图片延迟加载的效果，图片全部被加载完了
*/
var lazyLoad = {
    Init: function () {
        return $("img[lazyload]");
    },
    Calculate: function (lazyloadobject) {
        var windowHeight = $(window).height();
        var arrReturn = {};
        var _scrollTop;
        if (lazyloadobject.length == 0) {
            return null;
        }
        else {
            lazyloadobject.each(function (i) {
                _scrollTop = parseInt($(this).offset().top - windowHeight);
                if (!arrReturn.hasOwnProperty(_scrollTop)) {
                    arrReturn[_scrollTop] = new Array();
                }
                arrReturn[_scrollTop].push($(this));
            });
            this.ArrLoad = arrReturn;
            return arrReturn;
        }
    },
    ArrLoad: null,
    IsLoad: function (scrolltop, objectstop) {
        if (objectstop != null && objectstop != {}) {
            for (i in this.ArrLoad) {
                if (parseInt(i) <= scrolltop && this.ArrLoad.hasOwnProperty(i)) {
                    for (j = 0; j < this.ArrLoad[i].length; j++) {
                        this.ArrLoad[i][j].attr("src", this.ArrLoad[i][j].attr("lazyload")).removeAttr("lazyload");
                    }
                    delete this.ArrLoad[i];
                }
            }
        }
    },
    Run: function () {
        var lazyLoadObject = this.Init();
        this.Calculate(lazyLoadObject);
        arrScrollTop = this.ArrLoad;
        if (arrScrollTop == null) {
            return false;
        }
        else {
            var _this = this;
            _this.IsLoad($(window).scrollTop(), arrScrollTop);
            $(window).scroll(function () {
                _this.IsLoad($(this).scrollTop(), arrScrollTop);
            });
        }
    }
}

/**
图片延迟加载修改版本01：适用于普通的页面，没有嵌套在iframe中的页面实现图片延迟加载
图片加载的顺序是对可见区域的图片进行加载，滚动条滚到哪部分就进行哪部分图片的加载
*/
var lazyLoad = {
   /**
   * 初始化函数，获得当前页面中含有lazyload属性的img标签
   */
    Init: function () {
        return $("img[lazyload]");
    },
   /**
     * 计算函数，计算img到浏览器顶部的距离，如果距离一样就放到同一个数组中
     */
    Calculate: function (lazyloadobject) {
       /**
       * 获得浏览器中可见区域的高度
       */
        var windowHeight = $(window).height();
        var arrReturn = {};
        var _scrollTop;
        if (lazyloadobject.length == 0) {
            return null;
        }
        else {
           /**
           * 依次循环当前页面中所有的img对象
           */
            lazyloadobject.each(function (i) {
               /**
               * 计算img到浏览器顶部的距离
               */
                _scrollTop = parseInt($(this).offset().top);//parseInt($(this).offset().top - windowHeight);
                if (!arrReturn.hasOwnProperty(_scrollTop)) {
                    arrReturn[_scrollTop] = new Array();
                }
               /**
                 * 距离一样就放到同一个数组中
                 */
                arrReturn[_scrollTop].push($(this));
            });

           /**
             * 获得图片的高度
             */
           this.ImgHeight = $(lazyloadobject[0]).attr("height");
           /**
           * 处理好以后的img对象数组
           */
            this.ArrLoad = arrReturn;
            return arrReturn;
        }
    },
    ArrLoad: null,
   /**
     * 图片高度
     */
    ImgHeight: null,
    /**
     * 进行图片的加载
     */
    IsLoad: function (scrolltop, objectstop) {
       /**
       * 浏览器可见区域底部的高度
       */
       var maxScrollTop = parseInt(scrolltop + $(window).height());
        if (objectstop != null && objectstop != {}) {
            for (i in this.ArrLoad) {
               /**
               * 如果图片在可见区域类，就进行图片的加载，否则就不进行加载
               */
                if (parseInt(i) >= scrolltop && parseInt(i) <= maxScrollTop && this.ArrLoad.hasOwnProperty(i)) {
                    for (j = 0; j < this.ArrLoad[i].length; j++) {
                        this.ArrLoad[i][j].attr("src", this.ArrLoad[i][j].attr("lazyload")).removeAttr("lazyload");
                    }
                    delete this.ArrLoad[i];
                }
            }
        }
    },
    /**
     * 执行函数，调用相关的函数进行图片延迟加载的处理
     */
    Run: function () {
        var lazyLoadObject = this.Init();
        this.Calculate(lazyLoadObject);
        arrScrollTop = this.ArrLoad;
        if (arrScrollTop == null) {
            return false;
        }
        else {
            var _this = this;
            _this.IsLoad($(window).scrollTop(), arrScrollTop);
           /**
             * 触发浏览器滚动条滚动事件
             */
            $(window).scroll(function () {
                _this.IsLoad($(this).scrollTop(), arrScrollTop);
            });
        }
    }
}

/**
图片延迟加载修改版本02：适用于嵌套在iframe中的页面实现图片延迟加载
图片加载的顺序是对可见区域的图片进行加载，滚动条滚到哪部分就进行哪部分图片的加载
*/
var lazyLoad = {
   /**
   * 初始化函数，获得当前页面中含有lazyload属性的img标签
   */
    Init: function () {
        return $("img[lazyload]");
    },
    /**
     * 计算函数，计算img到浏览器顶部的距离，如果距离一样就放到同一个数组中
     */
    Calculate: function (lazyloadobject) {
       /**
       * 获得浏览器中可见区域的高度
       */
        var windowHeight = $(window.parent).height();
        var arrReturn = {};
        var _scrollTop;
        if (lazyloadobject.length == 0) {
            return null;
        }
        else {
           /**
           * 依次循环当前页面中所有的img对象
           */
            lazyloadobject.each(function (i) {
               /**
               * 计算img到浏览器顶部的距离
               */
                _scrollTop = parseInt($(this).offset().top) + $(window.parent.document).find("iframe[id=zhy_iframe]").offset().top;
                if (!arrReturn.hasOwnProperty(_scrollTop)) {
                    arrReturn[_scrollTop] = new Array();
                }
                /**
                 * 距离一样就放到同一个数组中
                 */
                arrReturn[_scrollTop].push($(this));
            });

            /**
             * 获得图片的高度
             */
           this.ImgHeight = $(lazyloadobject[0]).attr("height");
           /**
           * 处理好以后的img对象数组
           */
            this.ArrLoad = arrReturn;
            return arrReturn;
        }
    },
    ArrLoad: null,
    /**
     * 图片高度
     */
    ImgHeight: null,
    /**
     * 进行图片的加载
     */
    IsLoad: function (scrolltop, objectstop) {
       /**
       * 浏览器可见区域底部的高度
       */
       var maxScrollTop = parseInt(scrolltop + $(window.parent).height());

        if (objectstop != null && objectstop != {}) {
            for (i in this.ArrLoad) {
               /**
               * 如果图片在可见区域类，就进行图片的加载，否则就不进行加载
               */
                if (parseInt(i) + this.ImgHeight >= scrolltop && parseInt(i) <= maxScrollTop && this.ArrLoad.hasOwnProperty(i)) {
                    for (j = 0; j < this.ArrLoad[i].length; j++) {
                        this.ArrLoad[i][j].attr("src", this.ArrLoad[i][j].attr("lazyload")).removeAttr("lazyload");
                    }
                    delete this.ArrLoad[i];
                }
            }
        }
    },
    /**
     * 执行函数，调用相关的函数进行图片延迟加载的处理
     */
    Run: function () {
        var lazyLoadObject = this.Init();
        this.Calculate(lazyLoadObject);
        arrScrollTop = this.ArrLoad;
        if (arrScrollTop == null) {
            return false;
        }
        else {
            var _this = this;
            _this.IsLoad($(window.parent).scrollTop(), arrScrollTop);
            /**
             * 触发浏览器滚动条滚动事件
             */
            $(window.parent.document).scroll(function () {
                _this.IsLoad($(this).scrollTop(), arrScrollTop);
            });
        }
    }
}