图片懒加载：当一个页面的图片过多时，如果要一次性把所有的图片都加载下来，那么势必会影响加载速度，这时我们可以考虑可视区域外的图片不加载。以提高网站加载效率，
注，网页时从上到下，从左往右解析的，一般js我们都放在页面的底部，图片未加载完会阻塞之后html的解析，有些js是window.onload后执行，这样会影响网站的整体效率
图片懒加载，常用于移动端的首屏加载，电商长页面网站。
在网上随便找一些图，有些图片可能比较慢，然后我们在试一下不使用懒加载，等图片加载完再执行以下某些js
main.js 里执行的alert("sadgdag")
<body> <ul> <li> <img src="http://www.crup.com.cn/ShowPic/Show?vpath=/newadimg/f2fcacc1-3ef9-42d9-ac70-8c28c7e77bc2.jpg&vtag=1&ptype=1" alt=""> </li> <li> <img src="https://pics5.baidu.com/feed/a686c9177f3e67091f9b091f719fbb38f9dc5510.jpeg?token=ee589eded1854d2639766088f210583d&s=60507184DC631C8C2320918A0300F090" alt=""> </li> <li> <img src="https://pics5.baidu.com/feed/11385343fbf2b21188fe6ba280d8413d0ed78ee3.jpeg?token=dfa61fab8c703d1db7fd0b640c418660&s=E312328C4E30348C66285C810300E088" alt=""> </li> <li> <img src="http://www.crup.com.cn/ShowPic/Show?vpath=/newadimg/254e623a-af6d-4f31-a0d9-9c4f19705ca1.jpg&vtag=1&ptype=1" alt=""> </li> <li> <img src="https://pics2.baidu.com/feed/0b55b319ebc4b74594143a9785a43a128b821508.jpeg?token=0bb3dbc69ee39d39220f53cf7b5e0ab9&s=64F01EC54112BFD054E0C5980300E083" alt=""> </li> <li> <img src="https://pics5.baidu.com/feed/79f0f736afc379318eb415c84061934041a91199.jpeg?token=3c9c9e4285b9edf4f0f593cec64f6323&s=2020E9B408C284DA1C90B00C0300E0D0" alt=""> </li> <li> <img src="https://pics6.baidu.com/feed/7af40ad162d9f2d372753ef50749ae166227ccea.jpeg?token=0f662dc3880daaad03696df8e837ec14&s=7F910F8C80F04F84E910EDD1030050BB" alt=""> </li> <li> <img src="https://pics2.baidu.com/feed/1b4c510fd9f9d72a486970047a8f0c31359bbbc0.jpeg?token=f5205f301bf425b8f2d6e2bc59a450a9&s=DB180DC756E2B7E108B9F0290300C052" alt=""> </li> <li> <img src="https://pics5.baidu.com/feed/377adab44aed2e7359794bb5a5b7858e85d6fad7.jpeg?token=8ff3937d0d41b154ca91df1bfa16b8ac&s=17B47585D240714D0CB1B5460300C0B8" alt=""> </li> <li> <img src="https://pics6.baidu.com/feed/7acb0a46f21fbe0980a9e2c349d628368544ada9.jpeg?token=e56dc05f1814999b6c29573860760cff&s=16009B4F26D235D218B9809803004093" alt=""> </li> <li> <img src="https://pics1.baidu.com/feed/d788d43f8794a4c2bb3d17c72c423fd0ac6e397f.jpeg?token=29cc6482fd5c88fd6ecf70e006b03f66&s=11224DB1FA1104DE8400A003030020D3" alt=""> </li> <li> <img src="https://pics1.baidu.com/feed/0dd7912397dda144e1d86be778b1f4a70df48699.jpeg?token=1829cc4215624445980f0596efb63ded&s=0832C4104EA072949768196D03008061" alt=""> </li> <li> <img src="https://pics6.baidu.com/feed/9a504fc2d5628535e114724b5ae952c3a6ef63eb.jpeg?token=5402ef70db73b3adc75080bb528c58ff&s=A1110B705B9044D41C603D650300D0A0" alt=""> </li> <li> <img src="https://pics6.baidu.com/feed/b999a9014c086e067cdbda06c80e5ff10ad1cb1c.jpeg?token=1c7762746d4141a44082e4a1bc095176&s=E2CAB1458E1364D46D2089280300F013" alt=""> </li> <li> <img src="https://pics0.baidu.com/feed/dbb44aed2e738bd41d69f2fb6b8da3d3267ff9b8.jpeg?token=956e3bc9f2d35ae59fe4459c55e2b3dd&s=84303C9F541F7BE952ADE56B0300F07B" alt=""> </li> <li> <img src="http://www.crup.com.cn/ShowPic/Show?vpath=/newadimg/1c13deac-4507-4008-a587-a4b0adce8cf2.jpg&vtag=&ptype=1" alt=""> </li> <li> <img src="https://pics5.baidu.com/feed/0824ab18972bd40712acd6e71dbeba540fb30978.jpeg?token=2c9d0cc6f3edb77b870e711b3af07371&s=61C0FE04D040C2FE14B06D940300C090" alt=""> </li> <li> <img src="https://pics0.baidu.com/feed/c2cec3fdfc039245da37ecc5e2a380c77c1e2531.jpeg?token=e5378459d687b5475001a9310a7c7d64&s=25725B860726AEE21C5825990300D082" alt=""> </li> <li> <img src="https://pics3.baidu.com/feed/bba1cd11728b471082e9cb21a6f9e7f8fe0323d0.jpeg?token=8129a5a14ecabab951b948e72ad9c7fe&s=AD6049874C863CD45215858B0300A093" alt=""> </li> <li> <img src="https://pics7.baidu.com/feed/1f178a82b9014a90dc0c231bcf401d17b31bee26.jpeg?token=c263e70878f7f114c8f3c4034ff8924a&s=AD5040860C738EDC4E7C309F03008080" alt=""> </li> </ul> <script type="text/javascript" src="main.js"></script> </body>
打开上面的页面明显发现最终的js执行的 比较慢，因为执行的是window.onload = function(){alert("页面执行完了")}
2，我们使用图片懒加载，可视区域外的图片都不加载，使用data-src属性保留图片的真实地址
<body>
<ul>
<li>
<img src="http://www.crup.com.cn/ShowPic/Show?vpath=/newadimg/f2fcacc1-3ef9-42d9-ac70-8c28c7e77bc2.jpg&vtag=1&ptype=1" alt="">
</li>
<li>
<img src="https://pics5.baidu.com/feed/a686c9177f3e67091f9b091f719fbb38f9dc5510.jpeg?token=ee589eded1854d2639766088f210583d&s=60507184DC631C8C2320918A0300F090" alt="">
</li>
<li>
<img data-src="https://pics5.baidu.com/feed/11385343fbf2b21188fe6ba280d8413d0ed78ee3.jpeg?token=dfa61fab8c703d1db7fd0b640c418660&s=E312328C4E30348C66285C810300E088" alt="">
</li>
<li>
<img data-src="http://www.crup.com.cn/ShowPic/Show?vpath=/newadimg/254e623a-af6d-4f31-a0d9-9c4f19705ca1.jpg&vtag=1&ptype=1" alt="">
</li>
<li>
<img data-src="https://pics2.baidu.com/feed/0b55b319ebc4b74594143a9785a43a128b821508.jpeg?token=0bb3dbc69ee39d39220f53cf7b5e0ab9&s=64F01EC54112BFD054E0C5980300E083" alt="">
</li>
<li>
<img data-src="https://pics5.baidu.com/feed/79f0f736afc379318eb415c84061934041a91199.jpeg?token=3c9c9e4285b9edf4f0f593cec64f6323&s=2020E9B408C284DA1C90B00C0300E0D0" alt="">
</li>
<li>
<img data-src="https://pics6.baidu.com/feed/7af40ad162d9f2d372753ef50749ae166227ccea.jpeg?token=0f662dc3880daaad03696df8e837ec14&s=7F910F8C80F04F84E910EDD1030050BB" alt="">
</li>
<li>
<img data-src="https://pics2.baidu.com/feed/1b4c510fd9f9d72a486970047a8f0c31359bbbc0.jpeg?token=f5205f301bf425b8f2d6e2bc59a450a9&s=DB180DC756E2B7E108B9F0290300C052" alt="">
</li>
<li>
<img data-src="https://pics5.baidu.com/feed/377adab44aed2e7359794bb5a5b7858e85d6fad7.jpeg?token=8ff3937d0d41b154ca91df1bfa16b8ac&s=17B47585D240714D0CB1B5460300C0B8" alt="">
</li>
<li>
<img data-src="https://pics6.baidu.com/feed/7acb0a46f21fbe0980a9e2c349d628368544ada9.jpeg?token=e56dc05f1814999b6c29573860760cff&s=16009B4F26D235D218B9809803004093" alt="">
</li>
<li>
<img data-src="https://pics1.baidu.com/feed/d788d43f8794a4c2bb3d17c72c423fd0ac6e397f.jpeg?token=29cc6482fd5c88fd6ecf70e006b03f66&s=11224DB1FA1104DE8400A003030020D3" alt="">
</li>
<li>
<img data-src="https://pics1.baidu.com/feed/0dd7912397dda144e1d86be778b1f4a70df48699.jpeg?token=1829cc4215624445980f0596efb63ded&s=0832C4104EA072949768196D03008061" alt="">
</li>
<li>
<img data-src="https://pics6.baidu.com/feed/9a504fc2d5628535e114724b5ae952c3a6ef63eb.jpeg?token=5402ef70db73b3adc75080bb528c58ff&s=A1110B705B9044D41C603D650300D0A0" alt="">
</li>
<li>
<img data-src="https://pics6.baidu.com/feed/b999a9014c086e067cdbda06c80e5ff10ad1cb1c.jpeg?token=1c7762746d4141a44082e4a1bc095176&s=E2CAB1458E1364D46D2089280300F013" alt="">
</li>
<li>
<img data-src="https://pics0.baidu.com/feed/dbb44aed2e738bd41d69f2fb6b8da3d3267ff9b8.jpeg?token=956e3bc9f2d35ae59fe4459c55e2b3dd&s=84303C9F541F7BE952ADE56B0300F07B" alt="">
</li>
<li>
<img data-src="http://www.crup.com.cn/ShowPic/Show?vpath=/newadimg/1c13deac-4507-4008-a587-a4b0adce8cf2.jpg&vtag=&ptype=1" alt="">
</li>
<li>
<img data-src="https://pics5.baidu.com/feed/0824ab18972bd40712acd6e71dbeba540fb30978.jpeg?token=2c9d0cc6f3edb77b870e711b3af07371&s=61C0FE04D040C2FE14B06D940300C090" alt="">
</li>
<li>
<img data-src="https://pics0.baidu.com/feed/c2cec3fdfc039245da37ecc5e2a380c77c1e2531.jpeg?token=e5378459d687b5475001a9310a7c7d64&s=25725B860726AEE21C5825990300D082" alt="">
</li>
<li>
<img data-src="https://pics3.baidu.com/feed/bba1cd11728b471082e9cb21a6f9e7f8fe0323d0.jpeg?token=8129a5a14ecabab951b948e72ad9c7fe&s=AD6049874C863CD45215858B0300A093" alt="">
</li>
<li>
<img data-src="https://pics7.baidu.com/feed/1f178a82b9014a90dc0c231bcf401d17b31bee26.jpeg?token=c263e70878f7f114c8f3c4034ff8924a&s=AD5040860C738EDC4E7C309F03008080" alt="">
</li>
</ul>
<script type="text/javascript" src="main.js"></script>
</body>
将第三张之后的图片都不加载，明显感觉到页面加载速度快了许多，然后我们要实现鼠标往下滚，图片加载出来
1.未加载图片默认是占绝空间大小的，使用defalut图片，一般都是一张loading图片
2.或者你也可以往下滚一次，默认一次加载多少张图片
我们使用第二种方式实现以下，往下滚一次，默认加载两张图片，
window.onload=function(){ alert('已经加载完图片了哦') scrollFunc = loadmoreimg(); window.onmousewheel = document.onmousewheel = scrollFunc; } // 差不多滚动最底部的时候就再继续加载， function loadmoreimg(){ var i =2; //使用节流防止一次滚动执行多次加载图片 var isdown = true; //代表当前状态可以加载图片 return function() { // 每次都要差不多滚动到最底部的时候才实现加载 /* 如果已经滚到最下面则执行某个操作 */ var e =e || window.event; // 为了兼容谷歌和火狐 document.body.scrollTop是谷歌上的 /* 滚动条的垂直位置 */ var scrolltop = document.documentElement.scrollTop||document.body.scrollTop; /* 整个页面的正文高度 */ var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight; /* 可见区域高度 */ var clientHeight = document.documentElement.clientHeight||document.body.clientHeight; /* 当scrolltop加clientHeight+300 大于scrollHeight */ if(scrollHeight >= (scrolltop+clientHeight+300)) { return; } if(isdown){ isdown = false //切换到不可加载 //判断新图片是否已经全部加载完成 //判断多张图片是否加载完我们借助promiseall实现 var imgs = document.getElementsByTagName("img") var promiseall=[]; for(var j=i;j<i+2&&j<imgs.length;j++){ promiseall.push( new Promise((resolve,rejuct)=>{ imgs[j].src = imgs[j].attributes["data-src"].value imgs[j].onload=function(){ resolve(imgs[j]) } }) ) } Promise.all(promiseall).then(img=>{ isdown = true; i = i+2; }) } } }
不想去做动态图片，讲究的看以下就好，效果就是往下滚，继续加载下面的图片
