采用IntersectionObserver API实现图片懒加载功能

最新推荐文章于 2024-01-25 09:29:50 发布

Chrolly

最新推荐文章于 2024-01-25 09:29:50 发布

阅读量328

点赞数

分类专栏：前端文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/qq_35005735/article/details/110928781

版权

前端专栏收录该内容

23 篇文章

订阅专栏

本文介绍了如何使用Intersection Observer API在HTML中实现图片的懒加载策略，通过监测元素进入视口来延迟加载真实大小的图片，提高用户体验。主要涉及img标签的数据-src和src属性，以及预加载的SVG图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、背景介绍

IntersectionObserver

二、HTML代码块

img 标签中，data-src存放的是图片真实地址，src存放的是预加载图片的缩略图。

说明：预加载图片一般采用几KB左右的svg动态图。

<body>
  <h2>图片列表</h1>
  <ul class="wrapper">
    <li><img class="scroll-con-img" src="./asset/loader-spinner.svg" data-src="./asset/1.jpg" alt="" /></li>
    <li><img class="scroll-con-img" src="./asset/loader-spinner.svg" data-src="./asset/2.png" alt="" /></li>
    <li><img class="scroll-con-img" src="./asset/loader-spinner.svg" data-src="./asset/3.jpg" alt="" /></li>
    <li><img class="scroll-con-img" src="./asset/loader-spinner.svg" data-src="./asset/4.jpg" alt="" /></li>
  </ul>
</body>

三、js验证

// 获取所有的滚动图片，并以数组的形式存储
const imgs = Array.from(document.querySelectorAll(".scroll-con-img"));

const options = {
    root: null,
    threshold: [0],
    rootMargin: '0px',
}

function lazyload(target){
    const io = new IntersectionObserver((entries, observer) => {
        entries.forEach((entry, i) => {
            if(entry.isIntersecting){
                const img = entry.target;
                const src = img.getAttribute('data-src');
                img.setAttribute('src', src);
                img.classList.add("fade");
                io.unobserve(entry.target)
            }
        });
    }, options);
    io.observe(target);
}
imgs.forEach((dataImg) => {
    lazyload(dataImg)
});