loading...

Posted on

图片加载

懒加载

1
2
<div></div>
<img data-src="img/1.jpg" alt=""/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body{
	height: 3000px;
}
*{
	margin: 0;
	padding: 0;
}
img{
	position: absolute;
	top: 1000px;
}
div{
	height: 1000px;
	background: skyblue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//获取 img 标签
var img = document.querySelector('img');
//获取 img 的top值
var imgTop = img.offsetTop;
//滚动条滚动时
window.onscroll = function(){
	//获取滚动条高度
	var sTop = document.body.scrollTop || document.documentElement.scrollTop;
	//获取窗口高度
	var wTop = document.documentElement.clientHeight;
	//判断位置是否抵达图片位置
	if (sTop+wTop > imgTop) {
		//赋值给src
		img.src = img.getAttribute('data-src');
	}
}

预加载

1
2
3
4
5
6
7
8
9
div{
	position: absolute;
	width: 100%;
	height: 100%;
	background: black;
	color: white;
	font-size: 50px;
	text-align: center;
}
1
2
3
4
<div>
	<span>0%</span>
	loading ... ...
</div>
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
var div = document.querySelector('div');
var span = document.querySelector('span');
var imgArr = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg'];
	
loadImageFn(imgArr,function(index){
	span.innerHTML = parseInt(index/imgArr.length*100) + '%';
//alert(index);
},function(){
	div.style.display = 'none';
});
/*
 * loadImageFn 预加载图片函数
 * arr参数是图片数组
 * fn是过程回调函数
 * over是结束回调函数
 * IE6判断不了
 */
function loadImageFn (arr,fn,over) {
	var index = 0;
	//加载第几张
	for (var i=0; i < arr.length; i++) {
		var img = new Image();
		//定义一个图片的对象
		img.src = 'img/'+ arr[i];
		//设置路径
		img.onload = function(){
			index ++; 
			//加载
			if (index == arr.length) {
			//图片加载完成后
				alert('加载完成!')
				over && over();
				//结束回调函数
			}
			fn && fn(index);
			//过程回调函数
		}
	}
}