网站首页的图片延迟加载是怎么实现的？

r囧r小猫 2022-01-11 12:25 207阅读 0赞

随着页面信息越来越丰富饱满，尤其像淘宝，京东之类的购物网站，首页就是他们的生命线！

最近在做某银行的网站，只有挤上首页才能得到更多的关注，于是乎各种业务人员就开始了首页位置之争，为了平息他们的战乱。首页囊括了他们全部的需求，他们满意的走人了，结果技术经理来了，说首页加载怎么这么大，于是乎，减！！！

首当其冲，缩小图片K数，不够，那怎么办，好吧，进入正题。长页面未显示的部分可以先不加载，省流量就是省钱，开搞！！！

思路就是，判断图片在页面中的位置，如果图片的位置大于小于当前的屏幕高度，那么显示图片，否则隐藏图片。

怎么一开始隐藏图片呢，很简单，<img csii\_src="1.png" alt="图片延迟加载实现原理">,给一个浏览器不认识的属性csii\_src,当需要显示图片的时候在element.src=element.getAttribute("csii\_src");,思路很简单吧，上代码了。

function lazyLoad() {
        var map_element = {};
        var element_obj = [];
        var download_count = 0;
        var last_offset = -1;
        var doc_body = null;
        var doc_element = null;
        var lazy_load_tag = [];
    
        function initVar(tags) {
            doc_body = document.body;
            doc_element = document.compatMode == 'BackCompat' ? doc_body: document.documentElement;
            lazy_load_tag = tags || ["img", "iframe"];
        };
    
        function initElementMap() {
            for (var i = 0,
            len = lazy_load_tag.length; i < len; i++) {
                var el = document.getElementsByTagName(lazy_load_tag[i]);
                for (var j = 0,
                len2 = el.length; j < len2; j++) {
                    if (typeof(el[j]) == "object" && el[j].getAttribute("csii_src")) {
                        element_obj.push(el[j]);
                    }//欢迎加入全栈开发交流圈一起学习交流：1007317281
                }
            }
            for (var i = 0,
            len = element_obj.length; i < len; i++) {
                var o_img = element_obj[i];
                var t_index = getAbsoluteTop(o_img);
                if (map_element[t_index]) {
                    map_element[t_index].push(i);
                } else {
                    var t_array = [];
                    t_array[0] = i;
                    map_element[t_index] = t_array;
                    download_count++;
                }//欢迎加入全栈开发交流圈一起学习交流：1007317281
            }
        };
    
        function initDownloadListen() {
            if (!download_count) return;
            /*var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop
            : doc_element.scrollTop;*/
            var offset;
            if (os.firefox) {
                offset = doc_element.scrollTop;
            } else {
                offset = doc_body.scrollTop;
            }
            var visio_offset = offset + doc_element.clientHeight;
            if (last_offset == visio_offset) {
                // setTimeout(initDownloadListen, 200);
                return;
            }
            last_offset = visio_offset;
            var visio_height = doc_element.clientHeight;
            var img_show_height = visio_height + offset + 20;
            for (var key in map_element) {
                if (img_show_height > key) {
                    var t_o = map_element[key];
                    var img_vl = t_o.length;
                    for (var l = 0; l < img_vl; l++) {
                        element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("csii_src");
                    }
                    delete map_element[key];
                    download_count--;
                }
            }
            // setTimeout(initDownloadListen, 200);
        };
    
        function getAbsoluteTop(element) {
            if (arguments.length != 1 || element == null) {
                return null;
            }
            var offsetTop = element.offsetTop;
            while (element = element.offsetParent) {
                offsetTop += element.offsetTop;
            }
            return offsetTop;
        }//欢迎加入全栈开发交流圈一起学习交流：1007317281
    
        function init(tags) {
            initVar(tags);
            initElementMap();
            initDownloadListen();
            $(window).scroll(function() {
                initDownloadListen();
            });
        };
        init();
    }

**结语**

感谢您的观看，如有不足之处，欢迎批评指正。  
\*\*[获取资料][Link 1]

转载于:https://blog.51cto.com/14145734/2387238

[Link 1]: https://jq.qq.com/?_wv=1027&k=58yPeWE

发表评论取消回复

表情：

评论列表（有 0 条评论，207人围观）

还没有评论，来说两句吧...

相关阅读

相关 MyBatis的延迟加载，你知道是怎么实现的么？

延迟加载也称为懒加载、惰性加载，使用延迟加载可以提高程序的运行效率，针对数据持久层的操作，在某些特定查询的情况下去访问特定的数据库，在其他情况下可以不访问某些数据表，尽量减少

今天药忘吃喽~/ 2023年09月26日 23:39/ 0 赞/ 122 阅读

相关 JS 实现图片延迟加载（懒加载）

实现原理 1. 结构中，我们使用一个盒子包裹着图片（图片不显示的时候，可以先占据着这个位置，并且设置默认背景图或背景颜色） 2. 最开始，img 的 src 设置默认

客官°小女子只卖身不卖艺/ 2022年12月29日 06:43/ 0 赞/ 614 阅读

相关 php延迟加载图片,zblogphp模板做图片lazyload延迟加载教程

前天接的一个zblog模板制作，需要用到图片延迟加载，特来分享出来： ![3dda3bbce2d33ef404b5f77d97d4326d.png][] 首先，上方这个文件

偏执的太偏执、/ 2022年11月18日 01:40/ 0 赞/ 436 阅读

相关 Jquery 实现图片延迟加载

网上的那个Jquery的插件不好用,你试过就知道. 无奈,自己写了一段代码 $(function()\{ var CPos=func

た入场券/ 2022年09月20日 08:31/ 0 赞/ 944 阅读

相关 JS实现图片延迟加载（lazyload改编）

为什么改写JS版：移动端做运营活动到时候经常需要用到大量的图片，图片过多导致加载过慢，用户体验差，插件lazyload.js需要依赖JQuery,单页面如果

迈不过友情╰/ 2022年08月19日 11:24/ 0 赞/ 437 阅读

相关 jquery延迟加载图片的方法分享

在网上经常会看到一些很长的网页会延迟加载其中的图片，我认为这是一种按需分配的做法，网页只为那些想继续浏览网页的人加载后面的图片，在不影响用户体验的前提下，使用jquery延迟加

向右看齐/ 2022年05月31日 09:36/ 0 赞/ 922 阅读

相关 javascript图片延迟加载

1.jquery\_lazyload github地址：[https://github.com/tuupola/jquery\_lazyload/][https_gith

阳光穿透心脏的1/2处/ 2022年05月16日 02:39/ 0 赞/ 795 阅读

相关图片加载延迟（ LazyLoad.js ）

在线引用地址： [http://www.ijquery.cn/demo/lazyload/js/lazyload/jquery.lazyload.js][http_www.ij

约定不等于承诺〃/ 2022年04月24日 16:28/ 0 赞/ 634 阅读

相关 vue首页加载优化

vue 首页加载过慢优化方案 1.异步路由加载，如下形式 \{ path: '/', name:

àì夳堔傛蜴生んèń/ 2022年01月23日 23:13/ 0 赞/ 304 阅读

相关网站首页的图片延迟加载是怎么实现的？

随着页面信息越来越丰富饱满，尤其像淘宝，京东之类的购物网站，首页就是他们的生命线！最近在做某银行的网站，只有挤上首页才能得到更多的关注，于是乎各种业务人员就开始了首页位置之

r囧r小猫/ 2022年01月11日 12:25/ 0 赞/ 208 阅读