实现图片懒加载的三种方式

  • 时间:
  • 浏览:1
  • 来源:大发5分排列5_极速5分排列3

本文来源: 掘金 如需转载请联系原作者

图片出显在视窗内的情況: element.getBoundingClientRect().top < clientHeight

原文发布时间为:2018年06月26日

原文作者:linlixy

图片出显在视窗内的情況: offsetTop < clientHeight + scrollTop

function getTag(tag) {
    return Array.from(document.getElementsByTagName(tag));
}
var observer = new IntersectionObserver(
    (changes) => {
        changes.forEach((change) => {
            if (change.intersectionRatio > 0) {
                var img = change.target;
                img.src = img.dataset.src;
                observer.unobserve(img);
            }
        })
    }
)
getTag('img').forEach((item) => {
    observer.observe(item);
})

具体用法如下: