%20(2).svg)
项目简介
本项目是基于 JavaScript 的图片懒加载系统，名为 LazyLoad 加载器。该系统主要解决页面多块区域垂直水平滚动后的图片懒加载问题，能显著提升页面加载速度，优化用户体验。
项目的主要特性和功能
- 自动加载：页面滚动时，自动加载可视区域内的图片。
- 多属性支持：支持通过
data-src或data-background-src属性存放图片真实地址。 - 丰富配置：提供滚动目标、加载元素、加载距离、间隔时间等多种配置选项。
- 外部调用：具备重新初始化加载图片（适用于无限滚动或分页）以及销毁滚动事件的外部调用方法。
安装使用步骤
假设已下载本项目的源码文件，按以下步骤操作：
1. 解压源码文件，进入项目文件夹。
2. 运行 npm i -S i-lazy-load 安装项目依赖。
3. 在需使用图片懒加载的页面引入插件代码。
4. 在页面的 img 标签添加 data-src 或 data-background-src 属性并设置真实图片地址。
5. 初始化图片懒加载实例，配置相关参数，示例如下：
javascript
var windowImgLoad = new ImgLazyLoad({
target: window,
el: '.right-wrap',
distance: 50,
interval: 250,
beforeLoad: function(el) {
console.log(el)
},
finishLoad: function(el) {
console.log(el)
},
errorLoad: function(el, event) {
console.log(el, event)
}
})
6. 根据需求，调用 windowImgLoad.refresh() 重新初始化加载图片，或调用 windowImgLoad.distroryed() 销毁滚动事件。
注意：使用前需用 CSS 布局好页面，图片容器必须设置宽度和高度。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】