主页 / 问题 / 1608096
Accepted
Bemfes
Asked:2025-03-04 19:37:24 +0000 UTC2025-03-04 19:37:24 +0000 UTC

我应该在图片标签中延迟加载 webp 和 avif 图像吗？

  • 772

我有一些负责图像延迟加载的 js 代码。但如果我们也用 picture 标签包裹 img，并且针对 webp、avif 格式的图片添加 source 标签，那么是否也需要对 source 标签做延迟加载呢？或者如果您使用图像的延迟加载，您可以不用图片标签和 webp、avif 格式吗？

<picture>
    <source srcset="human-back.avif" type="image/avif">
    <img class="lazy first" data-src="human-back.avif" src="pixel.png" alt="">
</picture>

const Images = document.querySelectorAll('img[data-src]');

function loadImages(entries) {
    if (entries[0].isIntersecting) {
        entries[0].target.src = entries[0].target.dataset.src
        observer.unobserve(entries[0].target) 
    }
}

const options = {
    threshold: 0,
    rootMargin: '50px'
}
const observer = new IntersectionObserver(loadImages, options)

Images.forEach(img => {
    observer.observe(img)
})
javascript

1 个回答

  1. Best Answer

    我不太明白你的问题。我按照我的理解来回答一下：

    • 您在包含图像的页面的加载速度方面遇到了问题。
    • 您开始使用 JS 中的一种延迟加载变体。
    • 现在他们开始使用标签picture，你想知道是否需要在 JS 中并行实现延迟加载。

    将 JS 延迟加载 和 一起使用picture没有多大意义。这是一个不必要的复杂化。而且该标签有一个loadingimg属性。

    现在，放弃 JS 的延迟加载并转向 HTML5 是更明智的做法。

    这已在英文主题中讨论过了。正如戴在那里回答的那样，最好使用以下构造：

    <picture>
    <source media="(min-width: 45em)" srcset="large.jpg" />
    <source media="(min-width: 18em)" srcset="med.jpg" />
    <source src="small.jpg" />
    <img src="small.jpg" alt="Photo of a turboencabulator" loading="lazy" />
</picture>

    我强烈建议阅读英文主题中的答案。它包含所有必要的示例和链接。

    考虑到上述情况，您的问题的答案很明确：不。

    根据许多人的观点（包括我的观点） - 使用标签picture和属性loading作为标签img。

    • 3

相关问题