延迟加载(lazy loading)
实现方式:
function lazyLoad() {
const images = document.querySelectorAll('img[data-src]');
images.forEach((img) => {
if (img.offsetTop < window.innerHeight + window.pageYOffset) {
img.src = img.dataset.src;
img.removeAttribute('data-src');
}
});
}
document.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
window.addEventListener('orientationChange', lazyLoad);
lazyLoad();
const options = {
root: null,
rootMargin: '0px',
threshold: 1.0
};
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
});
}, options);
const images = document.querySelectorAll('img[data-src]');
images.forEach((img) => {
observer.observe(img);
});
上一篇:不渲染具有url()属性的图像
下一篇:不渲染使用url()属性的图片