懒加载

@LazyLoading

说明

以下内容适合图片的懒加载

当内容进入到可视区时，触发加载，即：图片/视频的 src 属性一开始为空[不渲染]；当页面滚动到一定位置时[通常是3倍视口高度]，指定其 src 属性，开始渲染

.节省带宽

.不会吃流量

.改善用户体验更流畅

关键点

两个高度

1.视口高度/可视区高度：documentElement.clientHeight[视口宽度document.documentElement.clientWidth]

2.元素到视口上边的高度/距离：el.getBoundingClientRect().top

[]利用 window 的 resize 事件查看可视区高度变化

window.addEventListener('resize', (e) => {
    console.log(document.documentElement.clientHeight);
})

[]懒加载实现

如何改进性能？[重复加载]

function lazyLoad() {
  imgs.forEach(item => {
    if (item.getBoundingClientRect().top < window.innerHeight) {
      item.src = item.getAttribute('data-src');
    }
  })
}

[]图片预览 - 按 F12，滚动窗口；检查 Network 懒加载情况；