懒加载
通过图片懒加载可以让一些不可视的图片不去加载，避免一次性加载过多的图片导致请求阻塞（浏览器一般对同一域名下的并发请求的连接数有限制），这样就可以提高网站的加载速度，提高用户体验。
scroll监听
初始化img
<img data-src="https://tb1.bdstatic.com/tb/cms/liveshow/ent_slid2.jpg" class="lazy-image"/>
// css部分
.lazy-image {
background: url('../img/loading.gif') no-repeat center;
}
监听的回调函数
inViewShow() {
let imageElements = Array.prototype.slice.call(document.querySelectorAll('.lazy-image'))
let len = imageElements.length
for(let i = 0; i < len; i++) {
let imageElement = imageElements[i]
const rect = imageElement.getBoundingClientRect() // 出现在视野的时候加载图片
if(rect.top < document.documentElement.clientHeight) {
imageElement.src = imageElement.dataset.src // 移除掉已经显示的
imageElements.splice(i, 1)
len--
i--
}
}
}
document.addEventListener('scroll', inViewShow)
还可以通过函数节流优化滚动事件的处理函数
关于clientHeight及其他scrollHeight、offsetHeight
1.clientHeight、clientWidth→元素宽高（height+padding，不包含边框），可以理解为元素可视区域高度
2.offsetHeight、offectWidth→元素宽高（height+padding+border，包含边框），可以理解为元素的可视高度
3.scrollHeight、scrollWidth→元素宽高（内容的实际高度+上下padding<如果没有限制div的height，即height是自适应的，那么scrollHeight=clientHeight>）
Intersection Observer 特性
IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。
当一个IntersectionObserver对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦IntersectionObserver被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach((entry, index) => {
// 如果元素可见
if (entry.intersectionRatio > 0) {
let lazyImage = entry.target
lazyImage.src = lazyImage.dataset.src
lazyImage.classList.remove("lazy-image")
lazyImageObserver.unobserve(lazyImage)
// this.lazyImages.splice(index, 1)
}
})
})
this.lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
})
}else{
//若不支持 则采用scroll监听
}
Chrome浏览器已经支持了lazy-load
chrome 75 之后，已经支持 img lazy-load 了，以后可以不用使用js 的库来实现了
<script>
// 判断浏览器是否支持
const hasSupport = 'loading' in HTMLImageElement.prototype;
document.documentElement.className = hasSupport ? 'pass' : 'fail';
</script>
l懒加载
<!-- Lazy-load an offscreen image when the user scrolls near it -->
<img src="unicorn.jpg" loading="lazy" alt=".."/>
立刻加载图片
<!-- Load an image right away instead of lazy-loading -->
<img src="unicorn.jpg" loading="eager" alt=".."/>
由浏览器决定是否懒加载
<!-- Browser decides whether or not to lazy-load the image -->
<img src="unicorn.jpg" loading="auto" alt=".."/>
参考
图片懒加载
MDN-Intersection Observer
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
img lazyload chrome
