最近写加载大量图片的页面，由于服务器不给了，不能一次性加载全部图片，卡卡的，
于是参考很多github的例子以及博客园——“蜗牛闯红灯”大佬的博客，对页面进行优化，
当你鼠标拉下，浏览到某个div时候，才加载那一块的图片，简称：
1. 图片懒加载 lazy load在页面上的未可视区域可以添加一个滚动条事件，
判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
什么是图片懒加载问题：
对于图片过多的页面，为了加速页面加载速度，
所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。
这样子对于页面加载性能上会有很大的提升，也提高了用户体验。
2、实现方法
1
| <img src="loading.gif" data-src="http://xxx.ooo.com" />
|
然后将页面img标签获取并保存，开启一个定时器，遍历保存的img标签，
判断其位置是否出现在了可视区域内。如果出现在可视区域了那么就把真实的src地址给赋值上。
并且从数组中删除，避免重复判断。 那么你可能会问，如何判断是否出现在可视区域内吗？
那就是你可以获取当前img的相对于文档顶的偏移距离减去scrollTop的距离，
然后和浏览器窗口高度在进行比较，如果小于浏览器窗口则出现在了可视区域内了，
反之，则没有。
如图，往下面拉会出现白色的图案，渐变出下一张图片
如果
1、网速慢，
2、电脑卡
3、图片识别错误等 将会显示一个小小的gif图片，显示正在加载
3、代码：
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
|
/**************************************************/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Lazy Load Enabled With FadeIn Effect</title>
<link href="http://www.appelsiini.net/stylesheets/main2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#sidebar {
width: 0px;
}
#content {
width: 770px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<p>
<h1>Lazy Load(懒加载)</h1><br />
<small>Image lazy loader plugin for jQuery.</small>
<ul id="nav">
<li id="first"><a href="#" class="active">weblog</a></li>
<li><a href="#" class="active">projects</a></li>
</ul>
</p>
</div>
</div>
<div class="entry">
<img src="img/load.gif" data-original="img/one.png" width="750" height="521" alt="京紫1">
<img src="img/load.gif" data-original="img/two.png" width="580" height="937" alt="京紫2">
<img src="img/load.gif" data-original="img/three.png" width="750" height="421" alt="动漫1">
<img src="img/load.gif" data-original="img/four.png" width="510" height="287" alt="丹特丽安">
<img src="img/load.gif" data-original="img/five.png" width="750" height="422" alt="动漫2">
<img src="img/load.gif" data-original="img/six.png" width="800" height="436" alt="月山比吕">
</div>
<script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.lazyload.js?v=3" type="text/javascript" charset="utf-8"></script>
<script src="urchin.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img").lazyload({
effect : "fadeIn",
});
});
</script>
</body>
</html>
|