图片懒加载是性能优化里很常见的一个操作,可以节省用户流量、减少http请求、提升首屏的打开速度
很多情况下,用户首屏看到的图片是只有小部分,剩下的图片可以滑动的那个距离的时候在加载
大概的实现原理是:先把 img
的 src
属性加在自定义属性 data-src
上,等当前元素出现在可视区域里的时候,在把 data-src
里的图片链接设到 src
上
demo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Lazy-Load</title> <style> .img { width: 200px; height:200px; background-color: #000; } </style> </head> <body> <div class="container"> <div class="img"> <img class="pic" alt="加载中" data-src="./images/1.png"> </div> <div class="img"> <img class="pic" alt="加载中" data-src="./images/2.png"> </div> <div class="img"> <img class="pic" alt="加载中" data-src="./images/3.png"> </div> <div class="img"> <img class="pic" alt="加载中" data-src="./images/4.png"> </div> <div class="img"> <img class="pic" alt="加载中" data-src="./images/5.png"> </div> <div class="img"> <img class="pic" alt="加载中" data-src="./images/6.png"> </div> <div class="img"> <img class="pic" alt="加载中" data-src="./images/7.png"> </div> <div class="img"> <img class="pic" alt="加载中" data-src="./images/8.png"> </div> <div class="img"> <img class="pic" alt="加载中" data-src="./images/9.png"> </div> <div class="img"> <img class="pic" alt="加载中" data-src="./images/10.png"> </div> </div> </body> <script> const imgs = document.getElementsByTagName('img') const viewHeight = window.innerHeight || document.documentElement.clientHeight let num = 0 function lazyload(){ for(let i=num; i<imgs.length; i++) { let distance = viewHeight - imgs[i].getBoundingClientRect().top if(distance >= 0 ){ imgs[i].src = imgs[i].getAttribute('data-src') num = i + 1 } } } window.addEventListener('scroll', lazyload, false); </script> </html>
|
以上就是一个简单的 demo 了,在实际使用中,还需要注意加上函数防抖,不然 lazyload
函数会触发很多次,还有就是如果已经展示了的图片,就不在触发更改 src
属性的操作,减少不必要的开销