IE上的IntersectionObserver，Edge

问题描述：

IntersectionObserver是相当新的实验性API，此时所有浏览器都是not fully supported。IE上的IntersectionObserver，Edge

它会有很多用途，但现在最突出的是懒惰加载您的图片，也就是说，如果你有它们在你的网站上有很多用途。如果您使用Lighthouse审核您的网站，则为recommended by Google。

现在，网络上有几个片段暗示了它的使用情况，但我认为他们都没有100％的审查。例如，我试图使用this one。它在Chrome，Firefox和Opera上像一个魅力，但它在IE和Edge上不起作用。

const images = document.querySelectorAll('img[data-src]'); 
const config = { 
    rootMargin: '50px 0px', 
    threshold: 0.01 
}; 

let observer; 

if ('IntersectionObserver' in window) { 
    observer = new IntersectionObserver(onChange, config); 
    images.forEach(img => observer.observe(img)); 
} else { 
    console.log('%cIntersection Observers not supported', 'color: red'); 
    images.forEach(image => loadImage(image)); 
} 

const loadImage = image => { 
    image.classList.add('fade-in'); 
    image.src = image.dataset.src; 
} 

function onChange(changes, observer) { 
    changes.forEach(change => { 
    if (change.intersectionRatio > 0) { 
     // Stop watching and load the image 
     loadImage(change.target); 
     observer.unobserve(change.target); 
    } 

    }); 
}

更确切地说，如果浏览器支持IntersectionObserver代码应该认识到，如果没有，应立即加载所有图像，而无需利用API并写入到控制台IntersectionObserver不支持。所以，上面的代码片段没有做到这一点。

据我调查，当使用IE 11和Edge 15进行测试时，他们吐出一个错误来控制它们不识别forEach，尽管它们应该是support it。

我试过shim forEach，甚至用旧的for代替forEach，但是我不能在IE和Edge上找到这个代码片段。

有什么想法？

答

经过一番测试，我找到了原因。

首先，我让观察者观察document.body，它的工作原理。然后我猜观察者不能观察空的元素，所以我在我想观察的元素上设置1px边框，然后它就可以工作。

这可能是Edge上的一个错误，因为Chrome和Firefox都可以观察到空的元素。

对于精确的空元素意味着它们的宽度和高度都是0.因此设置css'min-width：1px; min-height：1px'也可以。 – zhoujy

IE上的IntersectionObserver，Edge

相关推荐