在网页开发中，图片懒加载是一种非常实用的技术，它能有效提升页面加载速度，减少不必要的资源浪费。简单来说，懒加载就是让图片只在用户需要看到它们的时候才加载，而不是一次性全部加载。这样可以显著优化用户体验，尤其对于长页面或者包含大量图片的网站。

核心原理其实很简单：通过监听滚动事件，当图片元素进入可视区域时，动态替换其`src`属性为真实的图片链接。这样一来，只有当前屏幕内的图片会被加载，大大降低了初始加载时间。此外，还可以结合`Intersection Observer API`来更高效地检测元素是否可见，进一步提升性能。

下面是一个简单的懒加载代码示例：

```javascript

document.addEventListener('DOMContentLoaded', function() {

const images = document.querySelectorAll('.lazy-img');

const observer = new IntersectionObserver(entries => {

entries.forEach(entry => {

if (entry.isIntersecting) {

const img = entry.target;

img.src = img.dataset.src; // 替换真实路径

observer.unobserve(img);// 停止观察

}

});

}, { threshold: 0.1 });

images.forEach(img => observer.observe(img));

});

```

📸通过这种方式，我们可以轻松实现图片懒加载，不仅提升了网站性能，还增强了用户的浏览体验！✨