在当今数字化浪潮汹涌澎湃的互联网世界，图片已然成为网页中不可或缺的重要元素。然而，当页面承载海量图片时，若一次性将所有图片全部加载，无疑会使页面初始加载速度陷入泥沼，尤其是在网络信号微弱如丝的恶劣条件下，用户将不得不面对长时间的等待，这无疑是对用户耐心的巨大考验。而图片懒加载技术的横空出世，则宛如一盏明灯，为解决这一困境照亮了前行的道路。
实现图片懒加载的核心思路犹如一场精心策划的视觉盛宴，仅在页面加载之初，将舞台的聚光灯聚焦于可视区域内的图片，当观众（用户）开始滚动页面，如同拉开了新的帷幕，那些悄然进入可视区域的图片才会依次闪亮登场，动态加载呈现。
首先，在 HTML 的舞台上，为需要懒加载的图片精心设计一个独特的 “出场方式”。将其src属性巧妙设置为一个占位符，这个占位符通常是一个小巧玲珑、几乎不占资源的透明图片，宛如一位默默等待的隐形使者。同时，别出心裁地添加一个自定义属性（如data-src），用于珍藏真实图片的神秘路径。例如：
<img src="placeholder.jpg" data-src="real-image.jpg" alt="Lazy Load Image">
随后，在 JavaScript 的魔法世界里，施展一系列神奇的咒语，监听scroll事件和load事件。load事件如同一位忠诚的卫士，确保页面加载完成的那一刻，所有的准备工作都已就绪；scroll事件则像一位敏锐的侦察兵，时刻关注着用户的滚动动作。当这些事件被触发时，如同吹响了行动的号角，代码开始遍历页面中所有的图片元素，运用精准的算法判断它们是否已踏入可视区域的舞台。判断图片是否在可视区域内的魔法公式如下：
function isInViewport(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)
);
}
通过获取图片相对于视口的精确位置以及视口的大小尺寸，就能准确判断图片是否已映入用户眼帘。
接下来，定义一个强大的函数loadImages，它如同一位指挥家，掌控着图片加载的节奏：
const images = document.querySelectorAll('img[data-src]');
function loadImages() {
images.forEach(image => {
if (isInViewport(image)) {
const src = image.getAttribute('data-src');
image.src = src;
image.removeAttribute('data-src');
}
});
}
这个函数遍历所有带有data-src属性的图片元素，对于那些已在可视区域内的幸运儿，取出其隐藏在data-src中的真实图片路径，赋予src属性，使其正式亮相，同时移除data-src属性，仿佛完成了一场华丽的蜕变。
最后，将loadImages函数与window对象的load事件和scroll事件紧密绑定：
window.addEventListener('load', loadImages);
window.addEventListener('scroll', loadImages);
如此一来，当页面加载完成或者用户滚动页面时，loadImages函数便会被自动唤醒，开启图片的动态加载之旅。这种图片懒加载功能在电商平台的商品展示页面、图片分享社区等图片密集型的场景中，无疑是一把提升用户体验的利器。它能够有效削减页面初始加载时的数据传输量，如同为页面减负，使其如飞鸟般轻盈，加载速度大幅提升。用户不再需要漫长等待，能够迅速沉浸于页面内容之中，畅享流畅的浏览与交互体验。
