图片延迟加载练习
1、javascript实现图片延迟加载方法汇总(三种方法)（转）
https://www.cnblogs.com/huangshikun/p/6640862.html
2、知识点应用：
1.浏览器尺寸获取：
- 可视区高度：document.documentElement.clientHeight
- 滚动条的距离： window.pageYOffset（只读）
- 元素上边到视窗上边的距离： object.getBoundingClientRect( ).top
- 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离：offsetTop
- 获取元素属性：img1.getAttribute（'src'）
- 删除元素： img.removeAttribute（'_src'）
2.html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍（转）： https://blog.csdn.net/u013795673/article/details/52171411
3.onload事件：
4.onscroll：`延时加载和，定时器一起用会出现bug`
5.onerror： 事件会在文档或图像加载过程中发生错误时被触发
3、思路整理：
1.可视区的大小 document.documentElement.clientHeight；
2.获取每一张照片的位置 绝对位置 到顶部的距离 li.offsetTop img[i] mytools.offset(img[i]).top object.getBoundingClientRect( ).top：元素上边到视窗上边的距离;
3.clientHeight pageYOffset offsetTop 可视区的大小 + 滚动条的距离 >= 每一张的绝对位置 document.documentElement.clientHeight + window.pageYOffset >=li[i].offsetTop
4.把所有需要延时加载的图片改成如下的格式：1、`<img lazy_src="图片路径" border="0"/>` 然后在页面加载时，把所有使用了lazy_src的图片都保存到数组里，然后在滚动时计算可视区域的top，然后把延时加载的图片中top小于当前可视区域（即图片出现在可视区域内）的图片的src的值用lazy_src的来替换（加载图片）：
4、编程过程：
1.结构中,把所有需要延时加载的图片改成如下的格式：<img lazy_src="图片路径" border="0"/>
2.得到每一个li给li添加判断（比图片小paddingtop=10px） (如果可视区的大小 + 滚动条的距离 <=每一张的绝对位置 ) 改格式
3.forEach循环检查标记，有标记进行操作；
4.给浏览器缓存一张照片，触发照片的onload事件，将缓存照片地址赋给页面中的img；
5.使用定时器进行删除标记；
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Title</title>
7 <link rel="stylesheet" href="css/reset.min.css">
8 <link rel="stylesheet" href="css/index.css">
9 <style>
10 #list img {
11 opacity: 0;
12 transition: 1s;
13 }
14 </style>
15 </head>
16
17 <body>
18 <div class="content">
19 <div class="header">
20 <span>排序</span>
21 <a href="javascript:;" kk="time">上架时间
22 <i class="up"></i>
23 <i class="down"></i>
24 </a>
25 <a href="javascript:;" kk="hot">热度
26 <i class="up"></i>
27 <i class="down"></i>
28 </a>
29 <a href="javascript:;" kk="price">价格
30 <i class="up"></i>
31 <i class="down"></i>
32 </a>
33 </div>
34 <ul id="list">
35 <!-- <li>
36 <img src="img/1.jpg" alt="">
37 <span>华为畅享7（香槟金）</span>
38 <span>2018-01-01</span>
39 <span>1</span>
40 <span>992</span>
41 </li> -->
42 </ul>
43 </div>
44
45 <script src="json/product.js"></script>
46 <script src="../mytools.js"></script>
47 </body>
48
49 </html>
1 <script>
2 data.push(...data); //40
3
4 function render(data) {
5 let html = '';
6 data.forEach((e, i) => {
7 html +=
8 `
9 <li>
10 <img width="205" height="205" _src="${e.img}" alt="">
11 <span>${e.title}</span>
12 <span>${e.time}</span>
13 <span>${e.hot}</span>
14 <span>${e.price}</span>
15 </li>
16 `;
17 });
18 list.innerHTML = html;
19 }
20 render(data);
21
22 // console.log(mytools.offset(list).top)
23
24 /*
25 思路整理：
26 1.可视区的大小 document.documentElement.clientHeight；
27
28 2.获取每一张照片的位置 绝对位置 到顶部的距离 li.offsetTop img[i] mytools.offset(img[i]).top
29
30 object.getBoundingClientRect( ).top：元素上边到视窗上边的距离;
31
32 3.clientHeight pageYOffset offsetTop
33 可视区的大小 + 滚动条的距离 >= 每一张的绝对位置
34 document.documentElement.clientHeight + window.pageYOffset >=li[i].offsetTop
35
36 4.把所有需要延时加载的图片改成如下的格式：1、<img lazy_src="图片路径" border="0"/>
37
38 然后在页面加载时，保存到img1 = new Image中，然后在滚动时计算可视区域的top，然后把延时加载的图片中top小于当前可视区域（即图片出现在可视区域内）的图片的src的值用 img1 = new Image 的来替换（加载图片）：
39
40 */
41
42 let client_height = document.documentElement.clientHeight;
43 let li_list = Array.from(list.querySelectorAll('li'))
44 lazy_load() //先调用onscroll中的函数让其运行一次，可视区域内有内容
45 onscroll = lazy_load; //滚动事件添加给函数；（onscroll 事件在元素滚动条在滚动时触发。）
46 function lazy_load() {
47 //结构中,把所有需要延时加载的图片改成如下的格式：1、<img lazy_src="图片路径" border="0"/>
48 //得到每一个li给li添加判断(比图片小paddingtop=10px) ， (如果可视区的大小 + 滚动条的距离 <=每一张的绝对位置 ) 改格式
49 //forEach循环检查标记，有标记进行操作；
50 //给浏览器缓存一张照片，触发照片的onload事件，将缓存照片地址赋给页面中的img；
51 //使用定时器进行删除标记；
52 li_list.forEach(el => {
53 /*el.offsetTop+paddingtop =mytools.offset(el.querySelector('img')).top*/
54 //*进行改格式操作*
55 if (el.offsetTop <= (document.documentElement.clientHeight + window.pageYOffset)) {
56 let img = el.querySelector('img');//获取元素
57 if (img.getAttribute('_src')) {//检查标记
58 //***给浏览器缓存一张照片，触发照片的onload事件，将缓存照片地址赋给页面中的img***
59 let img1 = new Image; //创建对象 new Image()
60 img1.src =img.getAttribute('_src'); //这样做就相当于给浏览器缓存了一张图片。
61 //如果图片加载成功就会进入onload事件，加载完成后执行；
62 img1.onload = function () {
63 img.src = img1.getAttribute('src') //调用加载的图片，解决部分未加载bug。
64 // img.src=img.getAttribute('_src')//调用已经加载的图片，进行src修改，别调用未加载过得图片(_src)
65 setTimeout(function () {
66 //每次赋值之后都删除_src，以便下次就不去匹配了
67 //加定时器的目的就是为了先赋值后删除
68 img.removeAttribute('_src');
69 }, 50);
70 }
71 img1.onerror = function () {
72 img.src = 'img/timg.jpg'; //给张默认图片
73 setTimeout(function () {
74 img.removeAttribute('_src');
75 }, 50);
76 }
77 img.style.opacity = 1 }}})}
78 </script>
来源：https://www.cnblogs.com/zijie-li/p/9847024.html