1. 利⽤ Intersection Observer API:
Intersection Observer 是浏览器提供的⼀种异步观察⽬标元素与其祖先或视窗(viewport)交叉状态 的⽅法。使⽤该 API,我们可以知道什么时候元素进⼊或离开视窗,从⽽进⾏相应的处理。
下⾯为⼀个基础的使⽤示例:
// 寻找⻚⾯中需要懒加载的图⽚元素
const images = document.querySelectorAll('.lazy-load');
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
// 当图⽚元素进⼊视窗时,开始加载
if (entry.isIntersecting) {
const img = entry.target;
// 真实的图⽚地址保存在元素的data-src属性中
img.src = img.dataset.src;
observer.unobserve(img); // 加载完后停⽌观察
}
});
});
images.forEach(img => observer.observe(img));
2. 利⽤ getBoundingClientRect() ⽅法:
getBoundingClientRect() ⽅法返回元素的⼤⼩及其相对于视⼝的位置,通过这个⽅法,我们可以 判断⽬标元素是否在视窗内,如果在,就开始加载。
window.addEventListener('scroll', lazyLoad());
function lazyLoad() {
const images = document.querySelectorAll('.lazy-load');
images.forEach(img => {
if (img.getBoundingClientRect().top <= window.innerHeight) {
img.src = img.dataset.src;
}
});
}
// 图片地址放在data-src 属性中