自己写的一款依赖于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即为当前的加载对象