性能优化之图片懒加载

ゝ一世哀愁。 2022-12-27 08:38 165阅读 0赞

本文在github做了收录 [github.com/Michael-lzg…][github.com_Michael-lzg]

demo源码地址 [github.com/Michael-lzg…][github.com_Michael-lzg 1]

![在这里插入图片描述][20201209160838172.png]

## 为什么要进行图片懒加载 ##

我们先来看一下页面启动时加载的图片信息。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20201209160808810.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20201209160717829.png]

## 图片懒加载的原理 ##

![在这里插入图片描述][2020120916091642.png]  
我们先来看下页面结构

<head>
        <meta charset="UTF-8" />
        <title>Lazyload</title>
        <style>
          img { 
            display: block;
            margin-bottom: 50px;
            height: 200px;
            width: 400px;
          }
        </style>
      </head>
      <body>
        <img src="./img/default.png" data-src="./img/1.jpg" />
        <img src="./img/default.png" data-src="./img/2.jpg" />
        <img src="./img/default.png" data-src="./img/3.jpg" />
        <img src="./img/default.png" data-src="./img/4.jpg" />
        <img src="./img/default.png" data-src="./img/5.jpg" />
        <img src="./img/default.png" data-src="./img/6.jpg" />
        <img src="./img/default.png" data-src="./img/7.jpg" />
        <img src="./img/default.png" data-src="./img/8.jpg" />
        <img src="./img/default.png" data-src="./img/9.jpg" />
        <img src="./img/default.png" data-src="./img/10.jpg" />
      </body>
    </html>

![在这里插入图片描述][20201209160954772.png]

function lazyload() { 
      let viewHeight = document.body.clientHeight //获取可视区高度
      let imgs = document.querySelectorAll('img[data-src]')
      imgs.forEach((item, index) => { 
        if (item.dataset.src === '') return
    
        // 用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置
        let rect = item.getBoundingClientRect()
        if (rect.bottom >= 0 && rect.top < viewHeight) { 
          item.src = item.dataset.src
          item.removeAttribute('data-src')
        }
      })
    }

--------------------

`getBoundingClientRect函数解释`：  
![在这里插入图片描述][20201209161839703.png]

rectObject = object.getBoundingClientRect();

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 3]

--------------------

![在这里插入图片描述][20201209161029143.png]

window.addEventListener('scroll', lazyload)

![在这里插入图片描述][20201209161054573.png]

function throttle(fn, delay) { 
      let timer
      let prevTime
      return function (...args) { 
        const currTime = Date.now()
        const context = this
        if (!prevTime) prevTime = currTime
        clearTimeout(timer)
    
        if (currTime - prevTime > delay) { 
          prevTime = currTime
          fn.apply(context, args)
          clearTimeout(timer)
          return
        }
    
        timer = setTimeout(function () { 
          prevTime = Date.now()
          timer = null
          fn.apply(context, args)
        }, delay)
      }
    }

![在这里插入图片描述][20201209161135392.png]

window.addEventListener('scroll', throttle(lazyload, 200))

## IntersectionObserver 实现懒加载 ##

地址：[https://juejin.cn/post/6903774214780616718\#heading-2][https_juejin.cn_post_6903774214780616718_heading-2]

[github.com_Michael-lzg]: https://github.com/Michael-lzg/my--article/blob/master/other/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B9%8B%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD.md
[github.com_Michael-lzg 1]: https://github.com/Michael-lzg/demo-code/tree/master/lazyLoad
[20201209160838172.png]: /images/20221120/2a740195dc4946df80c3e96d5691642d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]: /images/20221120/239872e2a9ca427abc2e6091b81dfe61.png
[20201209160808810.png]: /images/20221120/1922ee6f8971415d9a01101339d91d0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 1]: /images/20221120/30258298727f48c2ae23fca3d8f7618a.png
[20201209160717829.png]: /images/20221120/69e9ac071cfe4c0899aba684817be3cb.png
[2020120916091642.png]: /images/20221120/7939319298714e348a3c1829e256d6de.png
[20201209160954772.png]: /images/20221120/79b576eab8804d759c44e9c742086960.png
[20201209161839703.png]: /images/20221120/22e1eb1e219c4a9db7d4fb7078db5850.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 2]: /images/20221120/bec7aaa4093f4d6a9d002ea097b66c2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 3]: /images/20221120/be89e35c7418402a9b4c2a5a958735cb.png
[20201209161029143.png]: /images/20221120/c83a6403f751460992f0f772ceca728a.png
[20201209161054573.png]: /images/20221120/4917caff900349b4b99352c15bca21f2.png
[20201209161135392.png]: /images/20221120/e7b6e2bc4ca24685948fa54af33ca585.png
[https_juejin.cn_post_6903774214780616718_heading-2]: https://juejin.cn/post/6903774214780616718#heading-2