实现懒加载图片的方法是使用JavaScript编写一个函数，通过判断图片是否在可视区域内来决定是否加载该图片。以下是一个简单易懂的解决方案：
首先，给需要懒加载的图片添加一个自定义的data-src属性，将src属性设置为空。
在页面滚动事件中，判断每个图片是否进入了可视区域，如果进入了则将data-src属性的值赋给src属性，实现图片的懒加载。
以下是实现代码：
function lazyLoad() {
const images = document.querySelectorAll('img[data-src]');
images.forEach(img => {
if (img.getBoundingClientRect().top <= window.innerHeight && img.getBoundingClientRect().bottom >= 0 && getComputedStyle(img).display !== 'none') {
img.src = img.dataset.src;
img.removeAttribute('data-src');
}
});
}
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
window.addEventListener('DOMContentLoaded', lazyLoad);
- 我们将滚动、窗口大小改变和DOM加载事件都绑定了该函数，以便在不同情况下及时加载图片。
该方法可以在各种浏览器中稳定运行，并能够快速实现懒加载图片。希望对你有帮助！