Wie kann ich dem DOM hinzugefügte Bilder nach dem Laden der Seite dynamisch verzögert laden? ⇐ JavaScript

[Anonymous]

Ich füge Bilder nach dem Laden der Seite dynamisch in das DOM ein und versuche, sie mit IntersectionObserver verzögert zu laden. Dies funktioniert gut für Bilder, die beim ersten Laden der Seite vorhanden sind, aber später hinzugefügte Bilder werden nie beobachtet und daher nie geladen.
Hier ist eine vereinfachte Version meiner Arbeit.
HTML

Code: Select all

JavaScript

Code: Select all

const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
obs.unobserve(img);
}
});
});

function addImage() {
const img = document.createElement('img');
img.dataset.src = 'https://via.placeholder.com/600x400';
img.alt = 'Test image';
document.getElementById('content').appendChild(img);
observer.observe(img);
}

// Simulate async content load
setTimeout(addImage, 1000);

Erwartetes Verhalten:

Das Bild sollte geladen werden, wenn es in das Ansichtsfenster gelangt.
Tatsächliches Verhalten:

Das Bild wird dem DOM hinzugefügt, aber IntersectionObserver wird nie ausgelöst, auch nicht beim Scrollen.
Ich habe Folgendes überprüft:

• Das Der Beobachter wird erstellt, bevor das Bild hinzugefügt wird

• Code: Select all

  observer.observe(img)

  wird aufgerufen
• Das Bild befindet sich im Ansichtsfenster

Ist dies ein Missbrauch von IntersectionObserver bei der Arbeit mit dynamisch injizierten Elementen, oder übersehe ich einen erforderlichen Schritt beim Beobachten von Elementen, die nach dem Laden der Seite hinzugefügt wurden? Ich weiß nicht, ob es hilfreich ist, die Seite zu kennen, aber ich mache das für https://trifurno.nl/.