如何开发一个图片懒加载插件_JavaScript图片懒加载插件开发教程
图片懒加载通过延迟加载视窗外图片提升性能。使用data-src存储真实路径，getBoundingClientRect判断是否进入视口，结合scroll和resize事件监听并防抖，加载后移除监听。插件初始化遍历img[data-src]，进入视口时赋值src，支持自定义预加载距离，轻量高效。
图片懒加载是一种优化网页性能的常用技术，尤其在页面包含大量图片时效果明显。它通过延迟加载视窗外的图片，等到用户滚动到对应位置时才加载，从而减少初始请求、节省带宽、提升首屏加载速度。本文将带你一步步开发一个轻量、实用的 JavaScript 图片懒加载插件。
1. 理解懒加载的核心原理
懒加载的关键在于：不立即加载所有 img 标签的图片资源，而是先用占位符代替真实图片路径，当图片元素进入可视区域时，再将真实路径赋给 src 属性触发加载。
实现这一过程需要解决以下几个问题：
- 如何标记需要懒加载的图片？可以通过自定义属性如 data-src 存储真实图片地址。
- 如何判断图片是否进入视口？使用 getBoundingClientRect() 方法获取元素相对于视口的位置。
- 如何监听滚动或窗口变化？绑定 scroll 和 resize 事件，但要注意防抖以避免频繁触发。
- 如何提升性能？图片加载后应解除监听，避免重复检查。
2. 插件基础结构设计
我们希望这个插件简单易用，支持原生 JavaScript 调用，不依赖任何框架
。基本调用方式如下：
lazyLoader.init();
接下来构建构造函数和初始化方法：
function LazyLoad(options) {this.options = Object.assign({
threshold: 100 // 提前100px开始加载
}, options);
this.images = Array.from(document.querySelectorAll('img[data-src]'));
}
LazyLoad.prototype.init = function() {
this.checkImages();
this.bindEvents();
};
3. 实现图片检测与加载逻辑
核心是 checkImages 方法，遍历所有待加载图片，判断是否进入视口：
LazyLoad.prototype.isInViewport = function(img) {const rect = img.getBoundingClientRect();
return (
rect.top window.innerHeight + this.options.threshold &&
rect.bottom >= -this.options.threshold
);
};
LazyLoad.prototype.checkImages = function() {
this.images = this.images.filter(img => {
if (this.isInViewport(img)) {
img.src = img.dataset.src;
img.removeAttribute('data-src');
return false; // 加载完成，从列表中移除
}
return true; // 仍需监听
});
// 如果没有待加载图片，可解绑事件
if (this.images.length === 0) {
this.unbindEvents();
}
};
4. 绑定并优化事件监听
滚动和窗口大小变化都会影响图片可见性，所以需要监听这些事件。但频繁触发会影响性能，加入防抖机制：
LazyLoad.prototype.debounce = function(func, delay) {let timer;
return () => {
clearTimeout(timer);
timer = setTimeout(() => func.call(this), delay);
};
};
LazyLoad.prototype.bindEvents = function() {
this.debouncedCheck = this.debounce(this.checkImages, 100);
window.addEventListener('scroll', this.debouncedCheck);
window.addEventListener('resize', this.debouncedCheck);
};
LazyLoad.prototype.unbindEvents = function() {
window.removeEventListener('scroll', this.debouncedCheck);
window.removeEventListener('resize', this.debouncedCheck);
};
这样可以有效减少事件回调次数，提高运行效率。
5. 使用方式与 HTML 示例
在 HTML 中，只需将真实图片地址写入 data-src，并确保有占位图或默认样式：
然后引入脚本并初始化：
基本上就这些。一个轻量、可复用的图片懒加载插件就完成了。你可以根据需要扩展功能，比如支持背景图、添加加载动画、兼容老旧浏览器等。关键是理解“按需加载”和“视口检测”的逻辑，剩下的就是细节优化。
