图片懒加载
一、什么是懒加载技术？
定义：这张图片很懒，喜欢临时抱佛脚，都到了出现在屏幕视线范围内了才加载。不过懒人有懒福，这样可以在那种有大量图片需要展示的网站上优化性能，减轻浏览器压力，毕竟你要浏览器一次加载一两百张图片也很累
二、为什要使用这个技术？
这样做能防止页面一次性向服务器发送大量请求，导致服务器响应慢，页面卡顿崩溃等。比如一个页面中有很多图片，如淘宝、京东首页等等，如果一上来就发送这么多请求，页面加载就会很漫长，如果js文件都放在了文档的底部，恰巧页面的头部又依赖这个js文件，那就不好办了。更为要命的是：一上来就发送百八十个请求，服务器可能就吃不消了（又不是只有一两个人在访问这个页面）。因此优点就很明显了：不仅可以减轻服务器的压力，而且可以让加载好的页面更快地呈现在用户面前（用户体验好）。
三、怎么实现？
原理： 先将img标签的src链接设为同一张图片（比如空白图片），先把图片地址存储在一个临时属性上，然后将真正的图片地址存储在data-src中，当用浏览器的onscroll事件监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中，达到懒加载的效果。
判断条件
window.innerHeight 可以获取到这个窗口的高度(不包括工具栏和滚动条)。getBoundingClientRect()方法用来获取页面中某个元素的左、上、右、下分别相对浏览器视窗的位置，返回的是一个矩形对象，包括四个属性，分别是left 、top、right、bottom。分别表示元素各边与页面上边和左边的距离。
基本的判断就是如果该图片距离窗口上方的位置小于窗口的高度（也就是说该图片已经进入了窗口），那么就将该图片的src属性赋为data-src找那个存的图片路径。
然后全局绑定scroll事件，在滚动页面的时候，图片进入到窗口后，500ms之后才会显示出图片。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>懒加载</title> <style> * { margin: 0; padding: 0; } li { list-style: none; height: 600px; box-sizing: border-box; border: 1px solid black; } img { display: block; margin: 100px auto; } </style> </head> <body> <div id="box"> <ul> <li> <img data-src="./图片懒加载/1.jpg" alt=""> </li> <li> <img data-src="./图片懒加载/2.jpg" alt=""> </li> <li> <img data-src="./图片懒加载/3.jpg" alt=""> </li> <li> <img data-src="./图片懒加载/4.jpg" alt=""> </li> <li> <img data-src="./图片懒加载/5.jpg" alt=""> </li> <li> <img data-src="./图片懒加载/6.jpg" alt=""> </li> <li> <img data-src="./图片懒加载/7.jpg" alt=""> </li> <li> <img data-src="./图片懒加载/8.jpg" alt=""> </li> <li> <img data-src="./图片懒加载/9.jpg" alt=""> </li> <li> <img data-src="./图片懒加载/10.jpg" alt=""> </li> </ul> </div> </body> </html>
<script> function imgonload() { let img = document.querySelectorAll("img"); /*console.log(img);*/ for(let i=0; i<img.length; i++) { if(img[i].getBoundingClientRect().top < window.innerHeight) { //图片一旦有src就会加载出来，所以图片的路径不会放在src中，而是一个自定义的属性data-src中 img[i].src = img[i].dataset.src; } } } function scollImg(fn) { let timer = null; let context = this; return function () { clearTimeout(timer); timer = setTimeout(() => { fn.apply(context); }, 500) } } window.onload = imgonload; window.onscroll = scollImg(imgonload); </script> ————————————————
