性能优化之图片懒加载

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

demo源码地址 github.com/Michael-lzg…

在这里插入图片描述

为什么要进行图片懒加载

我们先来看一下页面启动时加载的图片信息。
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

图片懒加载的原理

在这里插入图片描述
我们先来看下页面结构

  <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>

在这里插入图片描述

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函数解释
在这里插入图片描述

rectObject = object.getBoundingClientRect();

在这里插入图片描述
在这里插入图片描述


在这里插入图片描述

window.addEventListener('scroll', lazyload)

在这里插入图片描述

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)
  }
}

在这里插入图片描述

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

IntersectionObserver 实现懒加载

地址:https://juejin.cn/post/6903774214780616718#heading-2

相关推荐
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:马嘣嘣 返回首页