图片懒加载的原理:
通过延迟加载图片,只有当图片即将进入可视区域时再进行加载,以优化网页加载速度和性能。
具体的实现步骤如下:
将待加载的图片的 src 属性设置为空或者一个占位符,而不是真实的图片链接。
监听页面滚动事件或者其他触发条件,比如图片容器进入可视区域。
当触发条件满足时,获取到所有需要进行懒加载的图片元素。
遍历这些图片元素,将之前设置的空或占位符 src 属性替换为真实的图片链接。
图片开始加载并显示在页面上。
通过这种方式,可以避免一次性加载大量图片,提高页面的加载速度。同时,在用户滚动页面时,可以按需加载图片,减少不必要的网络请求和资源浪费。
<img class="lazy" data-src="image.jpg" src="placeholder.jpg"> // 获取所有具有.lazy类的图片元素 const lazyImages = document.querySelectorAll('.lazy'); // 监听滚动事件 window.addEventListener('scroll', lazyLoad); function lazyLoad() { // 遍历每个需要进行懒加载的图片 for (const lazyImage of lazyImages) { if (elementInViewport(lazyImage)) { // 将data-src属性的值赋值给src属性,触发图片加载 lazyImage.src = lazyImage.dataset.src; // 移除.lazy类,避免重复加载 lazyImage.classList.remove('lazy'); } } } function elementInViewport(element) { const rect = element.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); }
通过获取具有.lazy
类的图片元素集合,并使用scroll
事件监听用户滚动行为。当图片进入可视区域时,将data-src
属性的值赋给src
属性,触发图片加载。