主页 / 问题 / 1593041
Accepted
Bemfes
Asked:2024-09-06 21:39:54 +0000 UTC2024-09-06 21:39:54 +0000 UTC

IntersectionObserver，当页面在被观察对象的位置重新加载时，仅在页面滚动时触发，而不是立即触发

  • 772

我正在尝试使用 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)
})
javascript

1 个回答

  1. Best Answer

    您需要使用图像和浏览器窗口的坐标检查图像是否在可见区域中（上面的评论中建议了解决方案）。

    如果是，那么我们将-attributesrc中的数据插入到 attribute 中，并从 image 中删除观察者。我们将该函数插入到图像数组的循环中：dataforEach

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

相关问题