默认的触发事件,是滚动,当你滚动的时候,就会检查然后加载。你可以使用event属性,设置你自己的加载事件,之后你可以自定义触发这个事件的条件,然后去加载图像。
$("img.lazy").lazyload({ event : "click" });
自定义显示效果
默认的图片实现效果,就是没有效果,下载完成之后,直接显示出来。这样的用户体验并不好,你可以设置 effect 属性,来控制显示图片的效果。例如
$("img.lazy").lazyload({ effect : "fadeIn" });
fadeIn的效果就是,改变图片的透明度,渐现的方式出现。效果: effect demo page
把图像插入某个容器
大家如果使用智能手机的话,经常去应用网站下载应用,他们通常使用一个横着的容器,放一些手机截图。使用 container 属性,能很轻松在容器中实现缓冲加载。首先,我们需要用css定义这个容器,然后用这个插件进行加载。效果:vertical
#container { height: 600px; overflow: scroll; }
$("img.lazy").lazyload({
container: $("#container")
});
加载不可见图像
有部分图像是不可见的,我们对其加上类似 display:none 等属性的图像。默认的情况下,这个插件是不会加载隐藏的不可见图像。如果我们需要用它加载不可见图像,我们需要将 skip_invisible 设置为 false
$("img.lazy").lazyload({ skip_invisible : false });