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