实现思路
- 在页面放置img标签
- 给img图片加上alt, width, height 和 data-src
- 通过js判断页面是否滚动到某张图片需要显示的位置，这时将src赋值为data-src
offsetTop方式
图片出现在视窗内的情况： offsetTop < clientHeight + scrollTop
getBoundingClientRect方式
图片出现在视窗内的情况： element.getBoundingClientRect().top < clientHeight
h5的IntersectionObserver方式
- intersectionRatio：目标元素的可见比例，即 intersectionRect 占 boundingClientRect 的比例，完全可见时为 1 ，完全不可见时小于等于 0
具体用法如下：
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);
})
优化
- 通过以下css可以提高性能
# 之所以使用visibility而不是display是因为
# visibility不会触发重绘(repaint)和重排(reflow)
img {
visibility: hidden;
}
img[src] {
visibility: visible;
}
- 因为scroll事件的触发频率很高，频繁操作dom结点会造成很大的性能问题，所以需要做节流和防抖设计，减少scroll事件的触发频率
原文发布时间为：2018年06月26日
原文作者： linlixy
原文作者： linlixy
本文来源： 掘金 如需转载请联系原作者
