js 图片懒加载

网页开发时,常常需要了解某个元素是否进入了"视口"(viewport),即用户能不能看到它。最常见的需求就是图片的懒加载。

有时,我们希望某些静态资源(比如图片),只有用户向下滚动,它们进入视口时才加载,这样可以节省带宽,提高网页性能。这就叫做"惰性加载"。

传统方式(scroll)

传统的实现方法是,监听到 scroll 事件后,调用目标元素的 getBoundingClientRect() 方法,得到它对应于视口左上角的坐标,再判断是否在视口之内。这种方法缺点是,由于javascript怎么读 scroll 事件密集发生,计算量很大,容易造成性能问题。

let t;
// 监听滑动事件
$el.addEventListener('scroll', () => {
clearTimeout(t);
t = setTimeout(() => {
let height = $el.getBoundingClientRect().height; // 滚动所在容器的可视高度
let top = $el.scrollTop; // 滚动距离
let end = height + top;
let $lazyimgElem = $el.querySelector('img'); // 懒加载的图片节点
let elemTop = $lazyimgElem.offsetTop - top;
// 始终只加载在当前屏范围内的图片
if (elemTop >= top && elemTop <= end) {
$item.src = $item.getAttribute('lazy-src');
$item.removeAttribute('lazy-src');
if (elemTop <= end) {
let imageSrc = $item.getAttribute('lazy-src');
// 判断图片是否已经加载
if (imageSrc != null) {
$item.src = $item.getAttribute('lazy-src');
$item.removeAttribute('lazy-src');
}
}
}
}, 100)
});

在这里面由于 scroll 事件是每次滚动都能触发apink所以,在我们的滑动事件里面有可能会频繁获取节点,判断节点是已经加载图片,这里只是获取一个图片,如果是一个列表,我们要获取更多的节点话,就阿平赶海会使的计算量很大,容易造成性能问题。使啊拼音用下javascript浏览器面的方法就能避免这个问题。

Intersectioapi是什么意思nObserver

目前有一个新的 Injavascript什么意思tersapi是什么ectionObsejavascript:void(0)rv前端开发工资一般多少er API,可以自动"观察"元素是否可见。使用这个对象可以很方便简单的实现图片的懒加载。

// 获取所有的懒加载的图片元素
const $images = document.querySelectorAll('.image');
// 构建观察器
let observer = new IntersectionObserver((entries) => {
for (let entry of entries) {
/*
* 检测节点是否可见,可以通过 isIntersecting 验证,布尔值
* 如果目标元素与交叉区域观察者对象(intersection observer)的根相交,返回 true
* 此时描述了变换到交叉时的状态;
* 如果返回 false, 那么可以由此判断,变换是从交叉状态到非交叉状态.
* 同时也可以根据 intersectionRatio 验证
* intersectionRatio:目标元素的可见比例
* 即 intersectionRect 占 boundingClientRect 的比例
* 完全可见时为1,完全不可见时小于等于0
* 如果不可见,就返回:
*   if (entry.intersectionRatio <= 0) return;
*/
if (entry.isIntersecting === true) { // 检测节点是否可见
// 处于交叉可见状态
let $image = entry.target as HTMLImageElement;
$image.src = $image.getAttribute('lazy-src') as string;
$image.removeAttribute('lazy-src');
}
}
});
for (let i = 0, len = $images.length; i < len; i++) {
// 往观察器列表注册观察元素
observer.observe($images[i]);
}

参考:
阮一峰:IntersectionObserver API 使用教程