如何使用交叉點觀察器延遲加載圖像？

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" />