Как я могу динамически загружать изображения с отложенной загрузкой, добавленные в DOM после загрузки страницы? ⇐ Javascript

[Anonymous]

Я динамически добавляю изображения в DOM после загрузки страницы и пытаюсь загрузить их с помощью IntersectionObserver. Это отлично работает для изображений, которые существуют при начальной загрузке страницы, но изображения, добавленные позже, никогда не наблюдаются и, следовательно, никогда не загружаются.
Вот упрощенная версия того, что я делаю.
HTML

Код: Выделить всё

JavaScript

Код: Выделить всё

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);

Ожидаемое поведение:

Изображение должно загружаться при попадании в область просмотра.
Фактическое поведение:

Изображение добавляется в DOM, но IntersectionObserver никогда не запускается, даже при прокрутке.
Я проверил это:

• Наблюдатель создается до добавления изображения

• Код: Выделить всё

  observer.observe(img)

  вызывается
• Изображение находится внутри области просмотра

Это неправильное использование IntersectionObserver при работе с динамически внедряемыми элементами, или я пропустил обязательный шаг при наблюдении за элементами, добавленными после загрузки страницы? Не знаю, поможет ли вам знакомство с сайтом, но я делаю это для https://trifurno.nl/.

Подробнее здесь: https://stackoverflow.com/questions/798 ... -page-load