图片延迟加载练习
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>