在前端中,可以使用 JavaScript 来实现图片的懒加载。下面是一种常见的实现方式:
- 在 HTML 文件中,将需要懒加载的图片的
src
属性替换为一个占位符,例如使用一个透明的空白图片或者是一个包含背景色的 div。 - 给这些图片添加一个自定义的属性,例如
data-src
,并将真实的图片路径作为该属性的值,例如<img data-src="path/to/real/image.jpg">
。 - 使用 JavaScript 监听滚动事件,并检查图片是否进入了可见区域。
- 当图片进入可见区域时,将
data-src
属性的值赋给src
属性,从而触发图片加载。
下面是一个简单的示例代码:
html
<!-- HTML -->
<img data-src="path/to/real/image.jpg" class="lazy-load">
javascript
// JavaScript
window.addEventListener('DOMContentLoaded', function() {
var lazyImages = document.querySelectorAll('.lazy-load');
function lazyLoad() {
lazyImages.forEach(function(img) {
let r = img.getBoundingClientRect().top <= window.innerHeight;
let u = img.getBoundingClientRect().bottom >= 0 ;
let t = getComputedStyle(img).display !== 'none';
if ( r && u && t ) {
img.src = img.getAttribute('data-src');
img.classList.remove('lazy-load');
}
});
}
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
window.addEventListener('orientationchange', lazyLoad);
});
上述代码首先在页面加载完成后获取所有带有 lazy-load
类名的图片。然后,通过监听滚动、窗口调整大小和屏幕旋转等事件,在合适的时机检查图片是否需要加载。 如果图片已经进入可见区域内,就将 data-src
属性的值赋给 src
属性,并移除 lazy-load
类名,触发图片加载。
当然,这只是一个简单的示例代码,实际开发中可能需要处理更多的细节和边界情况。同时,也可以借助第三方的 JavaScript 库来简化懒加载的实现。