导读:
[导读] 基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载。 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度。 注意事项: 需要真正实现图片...
基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载。
对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度。
注意事项:
需要真正实现图片延迟加载,必须将真实图片地址写在 data-original 属性中。若 src 与 data-original 相同,则只是一个特效而已,并不达到延迟加载的功能。
版本:
jQuery v1.4.4+
jQuery Lazy Load v1.7.2
使用方法
载入 JavaScript 文件
修改 HTML 代码中需要延迟加载的 IMG 标签
调用 Lazy Load 1
$('img.lazy').lazyload();
调用 Lazy Load 2
var allImgObj = obj.find('img');
allImgObj.lazyload({
placeholder : lodingSrc, //用图片提前占位
effect: "show",
threshold: 0,
event: 'scroll',
skip_invisible: true,
data_attribute:"src"
});
参数说明
名称
默认值
说明
container
window
父容器。延迟加载父容器中的图片。
event
'scroll'
触发加载的事件,如 click [sporty 自定义],自定义事件必须 jquery方法$("img.lazy").trigger("sporty")
effect
'show'
加载使用的动画效果,如 show, fadeIn, slideDown 等 jQuery 自带的效果,或者自定义动画。
effectspeed
undefined
动画时间。作为 effect 的参数使用:effect(effectspeed)
data_attribute
'original'
真实图片地址的 data 属性后缀,如定义 src 那么真实DOM里面写 data-src='xxx.jpg'
threshold
0
灵敏度。默认为 0 表示当图片出现在显示区域中的立即加载显示;设为整数表示图片距离 x 像素进入显示区域时进行加载;设为负数表示图片进入显示区域 x 像素时进行加载。
failure_limit
0
容差范围。页面滚动时,Lazy Load 会遍历延迟加载的图片,检查是否在显示区域内,默认找到第 1 张不可见的图片时,就终止遍历。因为 Lazy Load 认为图片的排序是与 HTML 中的代码中的排序相同,但是也可能会出现例外,通过该值来扩大容差范围。
skip_invisible
true
跳过隐藏的图片。图片不可见时(如 display:none),不强制加载。
appear
null
图片加载时的事件 (Function),有 2 个参数:elements_left(未加载的图片数量)、settings(lazyload 的参数)。
load
null
图片加载后的事件 (Function),有 2 个参数,同 appear 。
相关工具:
生成占位图的在线工具:
https://dummyimage.com/