如何使用 Intersection Observer API 实现带有可滚动 DIV 的 LazyLoad？

Question

我正在使用位于 github.com/tuupola/lazyload 的 LazyLoad 库，如果您将主体作为根来检测进入视口的图像，该库会非常有用。

但是，我有一个固定宽度和高度的DIV，实际上覆盖了整个可见的浏览器窗口。我需要为该 DIV 分配延迟加载，因此当滚动 DIV 时，延迟加载会加载该 DIV 内的图像，这些图像将进入视口。

使用 LazyLoad 库可以传递另一个根：

new LazyLoad(images, {
     root: document.querySelector('#wrapper'),
});

在我的 JQuery 代码中我特别使用：

$('img.lazyload').lazyload({
    effect: 'fadeIn',
    root: $('#wrapper'),
});

但这不起作用。都没有

root: $('#wrapper')[0],

我还在 github/lazyload 报告了这一点，但也许这不是库的错误，但是，与 Intersection Observer API ？

有关

Answer 1

这里是使用

div

实现带有可滚动

Intersection Observer API

的 LayLoad 的完整示例。

HTML 结构：

<div class="scrollable-container">
    <div class="item">
        <img data-src="image1.jpg" alt="Image 1">
    </div>
    <div class="item">
        <img data-src="image2.jpg" alt="Image 2">
    </div>
    <!-- Add more items as needed -->
</div>

CSS：

.scrollable-container {
    height: 400px; /* Set the desired height */
    overflow-y: auto;
}

JavaScript：

// Function to handle image loading
function lazyLoadImage(target) {
    const image = target.querySelector('img');
    const src = image.getAttribute('data-src');
    if (src) {
        image.src = src;
        image.removeAttribute('data-src');
    }
}

// Create an Intersection Observer
const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            lazyLoadImage(entry.target);
            observer.unobserve(entry.target);
        }
    });
});

// Get all items to observe
const items = document.querySelectorAll('.item');

// Observe each item
items.forEach(item => {
    observer.observe(item);
});

// Initiating Lazy Load
const initialVisibleItems = document.querySelectorAll('.item:is(:in-viewport)');
initialVisibleItems.forEach(item => {
    lazyLoadImage(item);
});

:is(:in-viewport)

选择器是一个假设示例，说明如何使用 CSS 选择器最初在视口中选择元素。在实践中，您可能需要根据您的具体需求手动实现此逻辑。

Answer 2

在写这个答案时，所有浏览器都支持延迟加载图像，甚至在 android 和 ios 浏览器上也是如此。您不需要使用任何第三方插件来实现相同的目的。

您需要做的就是在

loading="lazy"

标签上添加属性

image

，如下所示：

<image src="imageUri" alt="image" loading="lazy" />

浏览器支持：

您可以在这里找到更多详细信息：

MDN 延迟加载

web.dev 图像延迟加载

MDN 图片加载属性