图片懒加载

scrollTop clientHeight 节流
  1. 什么是懒加载
  2. 懒加载原理
  3. 代码

懒加载（LazyLoad）是前端优化的一种有效方式，极大的提升用户体验，图片一直是页面加载的流浪大户，现在一张图片几兆已经是很正常的事，远远大于代码的大小。倘若一次ajax请求过来10张图片的地址，我想如果你一次性把10张图片都加载出来，肯定是不合理的。

什么是懒加载

为了提高页面的加载速度和提高用户的体验效果，我们在加载图片的时候可以将未在用户视觉范围内的图片先不加载，等到滚动到视觉范围内时才去加载

懒加载原理

原理很简单，先把img的src指向空或者一个小图片，图片真实的地址存储在img一个自定义的属性里,< img src=”” data-src=”http://real.com/real.jpg” />,等到此图片出现在视野范围内了，获取img元素，把data-src里的值赋给src。

代码

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
<!DOCTYPE html>
<html>
<head>
	<title>lazy</title>
	<style>
		img{
			display: block;
			width: 500px;
			height: 500px;
		}
	</style>
</head>
<body>
<div class="box">
	<img src="" data-src="./img/a.png" alt="">
	<img src="" data-src="./img/b.png" alt="">
	<img src="" data-src="./img/c.png" alt="">
	<img src="" data-src="./img/d.png" alt="">
	<img src="" data-src="./img/e.png" alt="">
	<img src="" data-src="./img/f.png" alt="">
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	$(function(){
		var dom=document.querySelectorAll("img");
		var len=dom.length;
		var n=0;
		var flag=true;//这个是为了节流的
		function loadImg(){
			flag=true;
			var clientHeight=document.documentElement.clientHeight;
			var scrollAddScroll=document.body.scrollTop||document.documentElement.scrollTop;
			for(var i=n;i<len;i++){
				if(dom[i].offsetTop<clientHeight+scrollAddScroll){
					if(dom[i].getAttribute("src")==""){
						var datasrc=dom[i].getAttribute("data-src");
						dom[i].src=datasrc;
					}
					n=n+1;
				}
			}
		}
		loadImg();
		window.onscroll=function(){
			if(!flag){ //这个判断主要是为了提高性能，也是js节流的体现
				return;
			}
			flag=false;
			setTimeout(loadImg,1000)
			console.log(n);
		}
	})
</script>
</body>
</html>

当前网速较慢或者你使用的浏览器不支持博客特定功能，请尝试刷新或换用Chrome、Firefox等现代浏览器