自己写的一款依赖于jQuery库的图片延迟加载插件,可对图片、背景图片进行延迟加载,提高网页加载速度,减轻服务器负载。
使用方法
引用相应js文件到页面,并创建对象
<script src="jquery.min.js"></script>
<script src="lazyLoadImg.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
new lazyLoadImg({offset: 100});
});
</script>
html结构 自定义存储图片路径的属性默认为data-imgsrc
<img data-imgsrc="img/img1.jpg">
<div data-imgsrc="img/bg_img1.jpg"></div>
参数设置
{
// 提前加载距离
offset: 0,
// 载入图片时的特效 (show: 直接显示 fadeIn: 淡入)
effect: 'show',
// 存储图片路径的属性名
storage: 'data-imgsrc',
// 加载图片时执行的回调函数
callback: function($obj){}
}
参数说明
| 参数名 | 类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|
| offset | Number | 0 | 自定义 | 滚动时提前多少像素加载图片(正数表示还未进入window可视窗,负数表示已进入可视窗) |
| storage | String | data-imgsrc | 自定义 | 存储图片路径的属性名 |
| effect | String | show | slow | fadeIn | 载入图片时的特效 (show: 直接载入 fadeIn: 淡入) |
| callback | Function | function($obj){} | 回调函数中的参数$obj即为当前的加载对象 |