IntersectionObserver при перезагрузке страницы в месте наблюдаемого объекта срабатывает только при скролле страницы, а не сразу

Question

Пытаюсь сделать lazy loading картинок с помощью IntersectionObserver. Когда просто листаешь страницу до места с картинкой, все подгружается нормально. Однако когда перезагружаешь страницу в месте с незагруженной картинкой, при перезагрузке картинка подгружается только при скролле страницы вверх-вниз, хотя картинка находится в поле видимости обсервера. Можно ли тут что-то сделать? Чтобы обсервер сразу видел, что картинку уже надо загрузить при перезагрузке?

<img class="lazy" data-src="girl (2).png" src="back.png" alt="">
<img class="lazy" data-src="comf-1.png" src="back.png" alt="">
<img class="lazy" data-src="comf-2.png" src="back.png" alt="">
<img class="lazy" data-src="yoga.png" src="back.png" alt="">

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

Answer 1

Надо сделать проверку, есть ли картинка в области видимости (решение подсказали в комментариях выше), с помощью координат картинки и окна браузера.

Если находится, значит вставляем в аттрибут src данные из data-аттрибута, и снимаем с картинки обсервер. Вставляем функцию в цикл forEach для массива картинок:

function visibleCheck(target) {
    let targetTop = target.getBoundingClientRect().top + window.pageYOffset
    let targetBottom = target.getBoundingClientRect().bottom + window.pageYOffset

    let windowTop = window.pageYOffset
    let windowBottom = window.pageYOffset + document.documentElement.clientHeight

    if (targetTop < windowBottom || targetBottom > windowTop) {
        target.src = target.dataset.src
        observer.unobserve(target)
    }
}

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

БЛОГ НА HUSL

IntersectionObserver при перезагрузке страницы в месте наблюдаемого объекта срабатывает только при скролле страницы, а не сразу

Ответы (1 шт):