js实现网页图片延时加载的原理和代码 提高网站打开速度

2022-05-30 17:54:42

有时我们看到一些大型网站，页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页面加载的速度，对于比较长的页面来说，这个方案是比较好的。

推荐：使用jquery图片延迟加载插件jquery.lazyload实现图片延迟


实现原理：

把所有需要延时加载的图片改成如下的格式：

<img lazy_src="图片路径" border="0"/>

然后在页面加载时，把所有使用了lazy_src的图片都保存到数组里，然后在滚动时计算可视区域的top，然后把延时加载的图片中top小于当前可视区域（即图片出现在可视区域内）的图片的src的值用lazy_src的来替换（加载图片）：

JS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
  lazyLoad = (function() {
  
    var map_element = {};
  
    var element_obj = [];
  
    var download_count = 0;
  
    var last_offset = -1;
  
    var doc_body;
  
    var doc_element;
  
    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() {
  
        var all_element = [];
  
        //从所有相关元素中找出需要延时加载的元素
  
        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("lazy_src")) {
  
                    element_obj.push(all_element[key]);
  
                }
  
            }
  
        }
  
   
  
        for (var i = 0,
  
len = element_obj.length; i < len; i++) {
  
            var o_img = element_obj[i];
  
            var t_index = getAbsoluteTop(o_img); //得到图片相对document的距上距离
  
            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++; //需要延时加载的图片数量
  
            }
  
        }
  
   
  
    };
  
    function initDownloadListen() {
  
        if (!download_count) return;
  
        var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop : doc_element.scrollTop;
  
        //可视化区域的offtset=document的高+
  
        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;
  
        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("lazy_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;
  
    }
  
    function init(tags) {
  
        initVar(tags);
  
        initElementMap();
  
        initDownloadListen();
  
    };
  
    return {
  
        init: init
  
    }
  
})();

使用方法：把页面上需要延时加载的图片src改成为lazy_src，然后把上面的js放到body最后面，然后调用：lazyLoad.init();
调戏的方法可以使用firebug来查看一时图片是否是延时加载。
另外：
如果你的页面上存在有内容切换的栏目的话，可能在切换时切换的内容里的图片可能会不显示，处理的方法是在内容时单独图片加载处理，如：

1
2
3
4
5
6
7
8
9
///切换内容的代码…
  
 chlid.find("img[init_src]").each(function(){
  
    $(this).attr("src",$(this).attr("init_src"));
  
    $(this).removeAttr("init_src");
  
 });

  所谓图片异步加载，意思是不用一次把图片全部加载完，你可以叫它延迟加载，缓冲加载都行。

  看看你有没有这种需求：某篇文章图片很多，如果在载入文章时就载入所有图片，无疑会延缓载入速度，让用户等更久，所以，我想找这样一种插件，让网页只加载浏览器视野范围内的图片，没出现在范围内的图片就暂不加载，等用户滑动滚动条时再逐步加载。lazyload就是用来实现这种效果。
lazyload.js其实是jQuery的一个插件，全称是jquery.lazyload.js，看它的名字就知道它的作用了——就是偷懒载入的意思。由于它是javascript写的，所以适用于所有网页，包括Wordpress。

  想要使用lazyload，得先载入jQuery，它是依靠jQuery来实现效果的。至于jQuery，大家不用去下载了，可以直接连接存放在Google服务器上的jQuery文件，永远不用担心丢失（当然，如果有天朝完全屏蔽Google的那一天的话……）


特效优点：

  加速wordpress站点的页面载入速度；

  不唐突的图片渐显方式；

  代码精简，便于操作维护，JS代码仅仅 1.6KB  先决条件是：你的站加载了 Jquery.js

原理：

  这个特效是少有的即华丽又加速的效果，因为它能判断访客是不是在查看当前图片，若非则加载预留的填充图片 grey.gif ，等到访客滑动鼠标滑轮或浏览到图片位置时，真正的图片地址才会加载。

   也就是说，如果访客瞬间打开你的页面，然后瞬间关闭，处于页脚的图片是不被加载的，何乐而不为呢？

   不用担心对访客的友好程度，这个效果会在图片即将被浏览到的时候就开始加载图片;

实现方法：

下载 jquery.lazyload.js

下载 预填充图片 fill.gif


  将上面2文件，放到您的网站的某个目录，或者你直接在外站调用。

    在当前主题的 header.php 中适当位置添加下面 JS调用代码，我当期用的inove主题后台就有添加js代码的地方：

【部分请自定义】

 【$("img")部分可以限定对页面中的哪些img生效】比如修改成$(".content img")

   压缩包中除了lazyload.js外，还有一个grey.gif图片文件。这个图片的作用是，当页面上图片未载入时，就显示这张图片。将JS文件与图片传到你的空间，然后在你主题的header.php文件中加入

js实现网页图片延时加载的原理和代码 提高网站打开速度,布布扣,bubuko.com

js实现网页图片延时加载的原理和代码 提高网站打开速度

上一篇：BootStrap入门教程 (三) ：可重用组件（按钮，导航，标签，徽章，排版，缩略图，提醒，进度条，杂项）


下一篇：java计算运行时间