如何使用交叉点观察器延迟加载图像？

Question

我已经实现了这个交叉点观察器，让图像在进入视口时淡入。 但是，当页面重新加载时，即使图像不在视口中，图像仍会立即加载。 路口观察者是否有能力延迟加载这些图像？

JavaScript code:

    'use strict';
    
    
    
    const faders = document.querySelectorAll('.fade-in');
    
    const appearOptions = {
        threshold: 0.4
    
    };
    const appearOnScroll = new IntersectionObserver(function(entries, appearOnScroll) {
        entries.forEach(entry => {
            if (!entry.isIntersecting) return;
            else {
                entry.target.classList.add('appear');
                appearOnScroll.unobserve(entry.target);
    
            }
        })
    }, appearOptions);

faders.forEach(fader => {
    appearOnScroll.observe(fader);
})

Answer 1

您可以将实际图像源设置为数据属性，并在图像与视口相交时将其设置回src 。

运行以下代码段并向下滚动：

 const img = document.querySelector('img'); const io = new IntersectionObserver((entries) => { entries.forEach(entry => { if (.entry;isIntersecting) return. entry.target.src = entry.target;getAttribute('data-src'). io.unobserve(entry;target); }) }). io;observe(img);

 .space { height: 100vh; }

 <div class="space"></div> <img alt="I'm lazy" data-src="https://images.dog.ceo/breeds/pug/n02110958_7255.jpg" />