井井客

搜索

LazyLoad.js懒加载图片插件的使用方法

它是一个jQuery插件,出来的时间也比较久了。随着懒加载模式的火热,网站利用LazyLoad.js这类懒加载图片的方式也越来越多。

LazyLoad.js懒加载图片插件的使用方法

LazyLoad.js由来

因为web页面中很多图片可能并不是一打开页面就要加载的,而只需当滚动条滚动到它前面一点的位置时再加载,这就需要我们对这些图片进行“延迟加载”,jquery.lazyload.js应运而生。

注意:jquery.lazyload.js是依赖jQuery的一款插件。

LazyLoad.js的使用

(1)引用

需要将jquery.js及jquery.lazyload.js这两个文件放入head区域

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

(2)基础用法

如需使用jquery.lazyload.js,那么在图片html代码的位置,写法就要跟普通图片有所区别了。
首先src的位置改写为占位图(默认没加载出来时显示的图片)
其次新增H5属性data-original,图片的路径写在这里
最后为了精确使用插件,给图片加个lazy样式,如下:

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">

现在再写上JS代码,就可以将class名为lazy的图片,延迟加载进来了。

<script>
$("img.lazy").lazyload();
</script>

(3)考虑禁用JS脚本的情况

虽然默认浏览JS脚本都是激活状态,但是也有访问者会将浏览的JS或者低版本浏览器不支持JS的情况出来,这时我们可以使用noscript中显示正常图片,而将lazy默认隐藏,只在调用API时将它显示。

//CSS样式代码
.lazy { display: none;}

//html代码
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

//JS脚本代码
$("img.lazy").show().lazyload();

如此这就是一套相对完整的逻辑了。但这只是可选的操作,如果你的网站要求并不那么严谨,你也可以忽略noscript的情况。

(4)提前加载API:threshold

默认是当图片出现在屏幕显示区域才加载图片,但这种效果用户体验并不那么好。所以我们需要提前一点距离就去加载图片,如图片在距离屏幕150像素时提前加载:

$("img.lazy").lazyload({
    threshold : 150
});

(5)特效API:effect

默认是使用show()方法来显示图片,如果觉得太过生硬,可以在效果这选择使用FadeIn参数。

$("img.lazy").lazyload({
    threshold : 150,
    effect : 'fadeIn'
});

上面两个说的就是比较常用的API了,如果感觉兴趣的童鞋可以看看官网:
使用说明地址:http://www.appelsiini.net/projects/lazyload
下载(里面也有案例):http://plugins.jquery.com/lazyload/

文章TAG:JQ

作者:井井客整理来源:互联网
本文标题:LazyLoad.js懒加载图片插件的使用方法
本文链接:/c/30136.html

上一篇:[基础版]JS添加获取cookie方法
下一篇:JS单张图片上传本地预览(dataURL-base64)

文章分类

相关阅读

随便看看