图片懒加载实现

最新推荐文章于 2022-11-08 20:02:53 发布

张小益达

最新推荐文章于 2022-11-08 20:02:53 发布

阅读量234

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41033913/article/details/104081808

版权

JavaScript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

文章目录

- 使用JavaScript实现
- 使用img的属性实现

如果可以使用谷歌，推荐查看延迟加载图像和视频

使用JavaScript实现

使用JavaScript实现的思想：监听用户滚动的状态，如果用户滚动的可视区域中有需要显示的图片，就需要把对应图片的src写入到img标签中，浏览器会自动加载图片并且显示。

<!-- 将图片的正确链接保存到data-src中 -->
      <img
        data-src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1301/05/c0/17135331_1357355776882.jpg"
        class="lazy-image"
      />

class lazyImage {
  constructor() {
    // 获取到页面中所有的img标签，并且将伪数组变为数组
    this.imgs = Array.from(document.querySelectorAll('img'));
    this.imgsLength = this.imgs.length;
    // window.onscroll = this.debounce(this.onScrollEvent.bind(this), 200);
    window.addEventListener(
      'scroll',
      // 回调函数的this指向全局，需要手动绑定构造函数中的this
      // this.onScrollEvent.call(this);
      
      // 可以写成节流/防抖函数，提高性能
      this.debounce(this.onScrollEvent.bind(this), 200)
    );
    // 页面一进入就需要查看可视范围内的图片
    this.init();
  }
  onScrollEvent() {
    // 需要监听鼠标滑过的高度
    let imgs = this.imgs;
    let height = document.documentElement.clientHeight;
    imgs.forEach((item, index) => {
      if (item) {
        let imgShow = item.getBoundingClientRect();
        if (imgShow.top < height) {
          let src = item.dataset.src;
          item.setAttribute('src', src);
          // 防止数组的塌陷问题
          imgs[index] = null;
        }
      } else {
        this.imgsLength--;
        if (this.imgsLength == 0) {
          // 已经全部显示，需要remove滑动事件
          document.removeEventListener('scroll', this.onScrollEvent);
        }
      }
    });
  }
  init() {
    // 需要使用到IntersectionObserver，异步观察目标元素的方法，需要考虑到兼容性的问题
    if ('IntersectionObserver' in window) {
      var intersectionObserver = new IntersectionObserver(function(entries) {
        entries.forEach((entry, index) => {
          if (entry.isIntersecting) {
            let lazyImage = entry.target;
            lazyImage.src = lazyImage.dataset.src;
            //停止对一个对象的关查
            intersectionObserver.unobserve(lazyImage);
          }
        });
      });
      this.imgs.forEach(item => {
        intersectionObserver.observe(item);
      });
    } else {
      this.onScrollEvent();
    }
  }

  debounce(func, wait = 200) {
    let timeout;
    return function() {
      let context = this;
      let args = arguments;

      if (timeout) clearTimeout(timeout);

      timeout = setTimeout(() => {
        func.apply(context, args);
      }, wait);
    };
  }
}

new lazyImage();

使用img的属性实现

img上面有一个loading的属性，它能够指定浏览器如何加载图形

eager立即加载图像，不管它是否在可视视口（visible viewport）之外（默认值）。

lazy延迟加载图像，直到它和视口接近到一个计算得到的距离，由浏览器定义。

使用方法：<img loading="lazy" src="" width="400" height="400" alt="">

如果需要自己测试的话，去找大量的图片也不好找，我这是在浏览网站的时候发现的一个demo,直接复制,然后在网络那里看请求的发送

<!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>图片懒加载--使用img属性</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1, minimum-scale=1"
    />
    <script type="text/javascript">
      document.documentElement.style.fontSize =
        (document.documentElement.clientWidth / 640) * 100 + 'px';
    </script>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <img
      loading="lazy"
      src="https://placekitten.com/400/400"
      width="400"
      height="400"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/401/401"
      width="401"
      height="401"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/402/402"
      width="402"
      height="402"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/403/403"
      width="403"
      height="403"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/404/404"
      width="404"
      height="404"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/405/405"
      width="405"
      height="405"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/406/406"
      width="406"
      height="406"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/407/407"
      width="407"
      height="407"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/408/408"
      width="408"
      height="408"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/409/409"
      width="409"
      height="409"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/410/410"
      width="410"
      height="410"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/411/411"
      width="411"
      height="411"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/412/412"
      width="412"
      height="412"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/413/413"
      width="413"
      height="413"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/414/414"
      width="414"
      height="414"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/415/415"
      width="415"
      height="415"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/416/416"
      width="416"
      height="416"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/417/417"
      width="417"
      height="417"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/418/418"
      width="418"
      height="418"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/419/419"
      width="419"
      height="419"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/420/420"
      width="420"
      height="420"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/421/421"
      width="421"
      height="421"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/422/422"
      width="422"
      height="422"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/423/423"
      width="423"
      height="423"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/424/424"
      width="424"
      height="424"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/425/425"
      width="425"
      height="425"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/426/426"
      width="426"
      height="426"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/427/427"
      width="427"
      height="427"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/428/428"
      width="428"
      height="428"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/429/429"
      width="429"
      height="429"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/430/430"
      width="430"
      height="430"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/431/431"
      width="431"
      height="431"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/432/432"
      width="432"
      height="432"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/433/433"
      width="433"
      height="433"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/434/434"
      width="434"
      height="434"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/435/435"
      width="435"
      height="435"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/436/436"
      width="436"
      height="436"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/437/437"
      width="437"
      height="437"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/438/438"
      width="438"
      height="438"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/439/439"
      width="439"
      height="439"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/440/440"
      width="440"
      height="440"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/441/441"
      width="441"
      height="441"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/442/442"
      width="442"
      height="442"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/443/443"
      width="443"
      height="443"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/444/444"
      width="444"
      height="444"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/445/445"
      width="445"
      height="445"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/446/446"
      width="446"
      height="446"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/447/447"
      width="447"
      height="447"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/448/448"
      width="448"
      height="448"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/449/449"
      width="449"
      height="449"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/450/450"
      width="450"
      height="450"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/451/451"
      width="451"
      height="451"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/452/452"
      width="452"
      height="452"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/453/453"
      width="453"
      height="453"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/454/454"
      width="454"
      height="454"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/455/455"
      width="455"
      height="455"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/456/456"
      width="456"
      height="456"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/457/457"
      width="457"
      height="457"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/458/458"
      width="458"
      height="458"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/459/459"
      width="459"
      height="459"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/460/460"
      width="460"
      height="460"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/461/461"
      width="461"
      height="461"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/462/462"
      width="462"
      height="462"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/463/463"
      width="463"
      height="463"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/464/464"
      width="464"
      height="464"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/465/465"
      width="465"
      height="465"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/466/466"
      width="466"
      height="466"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/467/467"
      width="467"
      height="467"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/468/468"
      width="468"
      height="468"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/469/469"
      width="469"
      height="469"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/470/470"
      width="470"
      height="470"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/471/471"
      width="471"
      height="471"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/472/472"
      width="472"
      height="472"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/473/473"
      width="473"
      height="473"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/474/474"
      width="474"
      height="474"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/475/475"
      width="475"
      height="475"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/476/476"
      width="476"
      height="476"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/477/477"
      width="477"
      height="477"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/478/478"
      width="478"
      height="478"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/479/479"
      width="479"
      height="479"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/480/480"
      width="480"
      height="480"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/481/481"
      width="481"
      height="481"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/482/482"
      width="482"
      height="482"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/483/483"
      width="483"
      height="483"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/484/484"
      width="484"
      height="484"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/485/485"
      width="485"
      height="485"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/486/486"
      width="486"
      height="486"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/487/487"
      width="487"
      height="487"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/488/488"
      width="488"
      height="488"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/489/489"
      width="489"
      height="489"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/490/490"
      width="490"
      height="490"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/491/491"
      width="491"
      height="491"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/492/492"
      width="492"
      height="492"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/493/493"
      width="493"
      height="493"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/494/494"
      width="494"
      height="494"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/495/495"
      width="495"
      height="495"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/496/496"
      width="496"
      height="496"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/497/497"
      width="497"
      height="497"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/498/498"
      width="498"
      height="498"
      alt=""
    />
    <img
      loading="lazy"
      src="https://placekitten.com/499/499"
      width="499"
      height="499"
      alt=""
    />
  </body>
</html>

张小益达

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片懒加载实现

文章目录使用JavaScript实现使用img的属性实现使用JavaScript实现使用JavaScript实现的思想：监听用户滚动的状态，如果用户滚动的可视区域中有需要显示的图片，就需要把对应图片的src写入到img标签中，浏览器会自动加载图片并且显示。 <img data-src="...
复制链接

扫一扫