前端性能优化总结(二)图片懒加载

最新推荐文章于 2024-05-14 16:18:36 发布

挖掘机器人

最新推荐文章于 2024-05-14 16:18:36 发布

阅读量227

点赞数

分类专栏：性能优化文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_45953482/article/details/125221062

版权

性能优化专栏收录该内容

4 篇文章 0 订阅

订阅专栏

图片懒加载也就是图片的延迟加载，实现图片的懒加载总共有两种方法

事件监听：监听scroll事件，鼠标滚动就触发
IntersectionObserver：按字面意思就是交叉观察，也就是目标元素和可视窗口会产生交叉区域，观察交叉区域发生什么事情，执行什么程序
第一种scroll事件
当图片距离视窗顶部的距离大于浏览器窗口显示区的高度时，图片不可见，反之可见

在这里插入图片描述
html代码

<body>
    <p>图片懒加载也就是图片的延迟加载</p>
    <p>图片懒加载也就是图片的延迟加载</p>
    <p>图片懒加载也就是图片的延迟加载</p>
    <p>图片懒加载也就是图片的延迟加载</p>
    <p>图片懒加载也就是图片的延迟加载</p>
    <p>图片懒加载也就是图片的延迟加载</p>
    <p>图片懒加载也就是图片的延迟加载</p>
    <p>图片懒加载也就是图片的延迟加载</p>
    <p>图片懒加载也就是图片的延迟加载</p>
    <p>图片懒加载也就是图片的延迟加载</p>
    <p>图片懒加载也就是图片的延迟加载</p>
    <p>图片懒加载也就是图片的延迟加载</p>
    <p>图片懒加载也就是图片的延迟加载</p>
    <p>图片懒加载也就是图片的延迟加载</p>
    <p>图片懒加载也就是图片的延迟加载</p>
    <p>图片懒加载也就是图片的延迟加载</p>
    <p>图片懒加载也就是图片的延迟加载</p>
    <p>图片懒加载也就是图片的延迟加载</p>
    <img data-src="./images/bargain.png" />
    <img data-src="./images/bargain.png" />
    <img data-src="./images/bargain.png" />
    <p>图片懒加载也就是图片的延迟加载</p>
    <p>图片懒加载也就是图片的延迟加载</p>
    <p>图片懒加载也就是图片的延迟加载</p>
    <script src="./images/bargain.png"></script>
  </body>

javascript代码

window.addEventListener("scroll", e => {
  // 先判断每张图片的位置是否在可视区域
  images.forEach(image => {
    const imageTop = image.getBoundingClientRect().top;
    if (imageTop < window.innerHeight) {
      const data_src = image.getAttribute("data-src");
      image.setAttribute("src", data_src);
    }
    console.log("scroll");
  });
});

问题每一次滚动都会触发事件，即使滚动结束依旧会触发事件
在这里插入图片描述

通过第二种方法IntersectionObserver可以更好的解决
通过IntersectionObserver来监视,当检查区域与元素发生了交互的时候会产生什么

该方法有两个参数

var observer = new IntersectionObserver(callback[, options]);

通过observe来触发,通过unobserve来解绑
当加载完成的时候就解绑,调用unobserve




const callback=entries=>{
    entries.forEach(entry => {
        if (entry.isIntersecting) {
      const image = entry.target;
      const data_src = image.getAttribute("data-src");
      image.setAttribute("src", data_src);
      // 图片被加载后取消观察
      console.log('触发了');
      observer.unobserve(image);
    }

    });
}
const observer = new IntersectionObserver(callback)

images.forEach(image=>{
    observer.observe(image)
})

第三种方案三：直接给标签添加属性loading="lazy"就好了

<img src="lazy.jpg" loading="lazy" />

除了谷歌浏览器暂不支持

挖掘机器人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端性能优化总结(二)图片懒加载

图片懒加载也就是图片的延迟加载，实现图片的懒加载总共有两种方法html代码javascript代码问题每一次滚动都会触发事件，即使滚动结束依旧会触发事件通过第二种方法IntersectionObserver可以更好的解决通过IntersectionObserver来监视,当检查区域与元素发生了交互的时候会产生什么该方法有两个参数通过来触发,通过来解绑当加载完成的时候就解绑,调用第三种方案三：直接给标签添加属性loading="lazy"就好了除了谷歌浏览器暂不支持...
复制链接

扫一扫