IntersectionObserver实现图片懒加载
IntersectionObserver可以监测元素在当前可视窗口的比例，完成实现图片懒加载getBoundingClientRect也是一个很好用查看元素偏移等的API
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title></title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <style> 8 ul{ 9 list-style: none; 10 } 11 img{ 12 width: 200px; 13 height: 200px; 14 background: #ddd; 15 } 16 </style> 17 </head> 18 <body> 19 <ul> 20 <li><img data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2943125063,3292210397&fm=26&gp=0.jpg" ></li> 21 <li><img data-src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2024373923,2140139723&fm=26&gp=0.jpg" ></li> 22 <li><img data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603097108640&di=85ad12ff7eb7f9572016612de1135925&imgtype=0&src=http%3A%2F%2Fa-ssl.duitang.com%2Fuploads%2Fitem%2F201407%2F18%2F20140718063817_s3Gnz.gif" ></li> 23 <li><img data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603097122497&di=1dff2a1a87c795199973d6f351ab88c6&imgtype=0&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1120712552%2C1362700559%26fm%3D214%26gp%3D0.jpg" ></li> 24 <li><img data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603097135282&di=bbb17f186fa620e910ad079e5f998711&imgtype=0&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D2230676464%2C2378994766%26fm%3D214%26gp%3D0.jpg" ></li> 25 <li><img data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603097163421&di=8cd014f555709f796fe643adde44afc3&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fa044ad345982b2b7014e90fe33adcbef76099b33.jpg" ></li> 26 <li><img data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603097184425&di=4dbac84b3f735da758433becd9d4e9ee&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201407%2F13%2F20140713000933_dC2z3.thumb.700_0.gif" ></li> 27 <li><img data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603097216523&di=e3393b6449183d29f689e10783c9694b&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253d580%2Fsign%3D2b04e747fd1f4134e0370576151e95c1%2F05460b2442a7d933458f9ed7ad4bd11372f00167.jpg" ></li> 28 <li><img data-src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=149701518,1608548313&fm=26&gp=0.jpg" ></li> 29 <li><img data-src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2692023635,939588326&fm=26&gp=0.jpg" ></li> 30 <li><img data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=268907504,1715864470&fm=26&gp=0.jpg" ></li> 31 <li><img data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603097268873&di=0ec97e5a4185af04869e5f150a1bf18d&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171129%2Ff510b6d293264e0cba3072353e5eb067.gif" ></li> 32 <li><img data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=366871761,2360018043&fm=26&gp=0.jpg" ></li> 33 <li><img data-src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3251940718,1404860427&fm=26&gp=0.jpg" ></li> 34 <li><img data-src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2476878483,4014399276&fm=26&gp=0.jpg" ></li> 35 <li><img data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2055680573,3089421073&fm=26&gp=0.jpg" ></li> 36 <li><img data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3926221861,1230045557&fm=26&gp=0.jpg" ></li> 37 </ul> 38 <script> 39 var imglist = document.querySelectorAll('img') 40 var observer = new IntersectionObserver(entries=>{ 41 entries.forEach(entry=>{ 42 43 if(entry.intersectionRatio>0){ 44 entry.target.src = entry.target.dataset.src 45 observer.unobserve(entry.target) 46 } 47 }) 48 }) 49 imglist.forEach(imgitem=>{ 50 observer.observe(imgitem) 51 }) 52 </script> 53 </body> 54 </html>
