前言：在我们闲暇无事的时候，总是看看这个、那个的网站，比如京东、天猫、淘宝什么的，当我们再看的时候会出现照片闪了一下的情况，这是正常的，因为图片刚刚加载出来，这个也就是懒加载，如果你在打开网页的时候，一下把图片都请求出来，你可能没看几秒就退出了，一是浪费了你的流量，二是用户体验差，一进入这个网站会浪费很多流量，所以会造成遗失大量的用户。
原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。
这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>LazyLoad</title> <style type="text/css"> img { display: block; width: 500px; height: 400px; } </style></head><body> <img src='./1.png'></img> <img src='./2.png'></img> <img src='./3.png'></img> <img src='./4.png'></img> <img src='./5.png'></img> <script type="text/javascript"> var aImg = document.querySelectorAll('img'); var len = aImg.length; var n = 0;//存储图片加载到的位置，避免每次都从第一张图片开始遍历 window.onscroll = function() { var seeHeight = document.documentElement.clientHeight; var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; for (var i = n; i < len; i++) { if (aImg[i].offsetTop < seeHeight + scrollTop) { if (aImg[i].getAttribute('src') == '') { aImg[i].src = aImg[i].getAttribute('guoyu-src'); } n = i + 1; console.log('n = ' + n); } } }; </script></bod
