js--懒加载

1、 图片懒加载的原理：看到的时候才下载

• 图片的src不设置真实路径
• 真实路径设置在data-original
• 判断：图片进入可视区，更改src

代码原理：

• 获取浏览器视口高度document.body.clientHeight   
• 定义方法lazyload：遍历所有lazyload=’true’的img元素，监听位置
• 一上来先执行一次lazyload，window.addEventListener(‘scroll’,lazyload)

优化思路：scroll事件触发评率高，频繁操作dom影响性能，可以做节流和防抖，减少频率 延伸：visibility：hidden|visible  不会触发重绘repaint和回流reflow，优于display

判断条件3）的三种方式：

• element.getBoundingClientRect().top < clientHeight
• offsetTop < clientHeight + scrollTop
• H5的intersectionObserver：判断可见比例intersectionRatio>0,就设置src      

代码1：

var viewHeight = document.body.clientHeight;
//获取可视区高度
function lazyload() {
  console.log('load')
  var list = document.querySelectorAll("img[data-original][lazyload]");
  list.forEach((item) => {
    if (item.dataset.original === "") return;
    var rect = item.getBoundingClientRect();
    console.log('图片相对位置top',rect.top)
    // 获得图片相对浏览器视窗的位置
    if (rect.bottom >= 0 && rect.top < viewHeight) {
      var img = new Image();
      img.src = item.dataset.original;
      img.onload = function () {
        item.src = img.src;
      };
      item.removeAttribute("data-original");
      //移除属性，下次不再遍历
      item.removeAttribute("lazyload");
    }
  });
}
lazyload(); //刚开始还没滚动屏幕时，要先触发一次函数，初始化首页的页面图片
document.addEventListener("scroll", lazyload);

代码2：感觉更加好

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