懒加载的实现原理

图片的加载是由src引起的,当对src赋值时,浏览器就会请求图片资源/根据这个原理,我们可以使用HTML5的data-xxx属性来储存图片的路径,等需要加载图片时,把data-xxx中的图片的路径赋值给src,这样就实现了图片的按需加载,也就是懒加载.

注:data-xxx中的xxx可以自定义,我们使用data-src来定义.

懒加载的实现重点在于需要确定用户要按需加载哪些图片,在浏览器中,可视区域内的资源就是用户需要的资源.所以当图片出现在可视区域时,需要获取到图片的真实地址并且赋值给图片.

使用原生js来实现懒加载:

知识点:

 window.innerHeight是浏览器可视区的高度

  document.body.scrollTop   document.documentElement.scrollTop是浏览器滚动过的距离

  imgs.offsetTop是元素顶部距离文档顶部的高度(包括滚动条的距离)

图片加载条件:

imgs.offsetTop < window.innerHeight + document.body.scrollTop 

图示:

 

代码实现:

 <div class="container">
        <img src="../20191210133745859.png" data-src="pic.png" alt="">
        <img src="../20191210134031663.png" data-src="pic.png" alt="">
        <img src="../src=http___dingyue.ws.126.net_2019_07_04_b2a547085f7c4a59a14a59317d9ee350.jpeg&refer=http___dingyue.ws.126.webp"
            data-src="pic.png" alt="">
      <img src="../images/account.png" data-src="pic.png" alt="">
      <img src="../images/cartPanelViewIcons.png" data-src="pic.png" alt="">
      <img src="../images/checked.png" data-src="pic.png" alt="">
      <img src="../images/delete.png" data-src="pic.png" alt="">
    </div>

    <script>
        let imgs = document.querySelectorAll('img')
        function lazyLoad() {
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
            let winHeight = window.innerHeight
            for (let i = 0; i < imgs.length; i++) {
                if (imgs[i].src.offsetTop < scrollTop + winHeight) {
                    imgs[i].src = imgs[i].getAttribute('data-src')
                }
            }
        }
        window.onscroll = lazyLoad()
    </script>