前端页面优化：javascript图片延迟加载

自己写了个简单的图片延迟加载小插件。 功能如下： 页面刷新，当前屏幕图片直接加载真实地址，body被卷去的部分和下方未显示的部分的img均加载通用图片如：loding.gif 随着屏幕上下滚动加载相应在窗口显示的img真实地址。

此处做了一个简单优化，因为延迟加载是计算每个图片距离顶部的距离然后循环赋值的，我在这里给每个图片定义一个flag标记，如果为false，循环时直接continue。这里还可以直接将图片真实地址赋值的img直接从数组中删除，两种写法从代码的臃肿性和执行的流畅性上尚未做对比。 最后附上简单的使用方法。 下面看插件源码：

0	var loding = function(elm){
1
2	elm = elm instanceof Array ? elm : [elm];
3
4	var i = 0,
5	imgArr = [];
6
7	for(i; i < elm.length; i += 1){
8
9	everyBox(elm[i]);
10
11	}
12
13	//给每个盒子进行遍历
14	function everyBox(box){
15
16	var imgs = document.getElementsByTagName('img');
17
18	//遍历每个图片数组
19	for(var i = 0; i < imgs.length; i += 1){
20
21	everyImg(imgs[i]);
22
23	}
24
25	}
26
27	function everyImg(img){
28
29	var temp = document.body.scrollTop || document.documentElement.scrollTop,
30	windowH = window.innerHeight;
31
32	img.temp = img.offsetTop;
33
34	img.tempB = img.offsetTop + img.offsetHeight;
35
36	if(img.attributes['data-src']){
37
38	img.ok = img.attributes['data-src'].nodeValue;
39
40	img.flag = true;
41
42	}
43
44	if(img.flag == true){
45
46	if(img.temp < temp + windowH && img.tempB > temp){
47
48	img.src = img.ok;
49
50	img.flag = false;
51
52	}
53
54	imgArr.push(img);
55
56	}
57
58	}
59
60	window.onscroll = function(){
61
62	var temp = document.body.scrollTop || document.documentElement.scrollTop,
63	i = 0,
64	windowH = window.innerHeight;
65
66	for(i; i < imgArr.length; i += 1){
67
68	if(imgArr[i].flag){
69
70	if(imgArr[i].temp < temp + windowH && imgArr[i].tempB > temp){
71
72	imgArr[i].src = imgArr[i].ok;
73
74	imgArr[i].flag = false;
75
76	}
77
78	}else{
79
80	continue;
81
82	}
83
84	}
85
86
87	}
88
89	};

  插件使用方法，在head内引入loding.js 所有需要使用延迟加载的图片请按如下格式编写 <img src="通用图片地址" data-src="真实图片地址"> 调用方法： loading（elm || [elm,elm,elm]）； 传入原生dom对象或dom对象数组均可。 插件会直接获取盒子内符合条件的img图片绑定延迟加载 延迟加载在线运行地址

 

查看原文-摘自大公爵ddamy.com