jquery.lazyload插件实现图片延迟加载
2016-01-27 14:30
736 查看
jquery.lazyload是一个实现图片延迟加载的jQuery 插件,它可以延迟加载长页面中的图片。在浏览器可视区域外的图片在初始状态下不会被载入,直到用户将页面滚动到它们所在的位置。
1.引入js文件
2.img标签
img标签的src指向一个图片占位符,这里推荐一个在线获取图片占位符的站点 > http://placehold.it/,真实图片路径在data-original中。
3.调用lazyload
[/code]
图片的占位符除了可以通过src属性来指定,也可以通过lazyload函数的参数来指定:
[/code]
4.占位图片事件触发加载
如果我们希望滚到到图片的位置后,还要通过click或hover事件来唤醒图片的加载,我们可以指定lazyload函数的event属性:
[/code]
[/code]
当图片完全加载的时候,插件默认地使用show()方法来将图显示出来。你也可以使用其他的效果,如fadeIn:
5.提前加载图片
lazyload插件默认用户滚动到图片位置时才触发加载图片,如果我们希望滚动到距离图片一定位置就触发加载,可以指定lazyload函数的threshold参数:
这样,当用户滚动到距离图片200像素时图片就开始加载了。
6.设置查找图片张数
lazyload的实现原理是,在页面滚动时,会搜索未加载的图片,如果图片在可视范围内就加载,默认情况下当找到第一张不在可见区域的图片时就会停止搜索。而搜索的顺序就是HTML文档中dom节点的定义顺序,所以如果有些图片定义在前面,但由于页面不好的布局图片将会呈现在后面,那么就会导致图片没办法正常显示。
此时我们可以通过lazyload函数的failure_limit参数:
[/code]
这样一来,插件会搜索至少10个未加载的图片才停止搜索,如果你的图片布局比较不规则,可以尝试将这个参数调大。
1.引入js文件
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
2.img标签
<img >"lazy" src="images/placeholder.gif" data-original="images/example.png" width="600"/">
img标签的src指向一个图片占位符,这里推荐一个在线获取图片占位符的站点 > http://placehold.it/,真实图片路径在data-original中。
3.调用lazyload
[/code]
$("img.lazy").lazyload();
图片的占位符除了可以通过src属性来指定,也可以通过lazyload函数的参数来指定:
[/code]
$("img.lazy").lazyload({ placeholder: "images/placeholder.gif" });
4.占位图片事件触发加载
如果我们希望滚到到图片的位置后,还要通过click或hover事件来唤醒图片的加载,我们可以指定lazyload函数的event属性:
[/code]
$("img.lazy").lazyload({ placeholder: "images/placeholder.gif", event: "click" });
[/code]
当图片完全加载的时候,插件默认地使用show()方法来将图显示出来。你也可以使用其他的效果,如fadeIn:
$("img.lazy").lazyload({ effect: "fadeIn" })
5.提前加载图片
lazyload插件默认用户滚动到图片位置时才触发加载图片,如果我们希望滚动到距离图片一定位置就触发加载,可以指定lazyload函数的threshold参数:
$(“img.lazy”).lazyload({ threshold: 200 });
这样,当用户滚动到距离图片200像素时图片就开始加载了。
6.设置查找图片张数
lazyload的实现原理是,在页面滚动时,会搜索未加载的图片,如果图片在可视范围内就加载,默认情况下当找到第一张不在可见区域的图片时就会停止搜索。而搜索的顺序就是HTML文档中dom节点的定义顺序,所以如果有些图片定义在前面,但由于页面不好的布局图片将会呈现在后面,那么就会导致图片没办法正常显示。
此时我们可以通过lazyload函数的failure_limit参数:
[/code]
$("img.lazy").lazyload({ failure_limit: 10 });
这样一来,插件会搜索至少10个未加载的图片才停止搜索,如果你的图片布局比较不规则,可以尝试将这个参数调大。
相关文章推荐
- jquery indexOf使用方法
- jquery 学习随笔 ui tabs选项卡
- 基于jQuery 的图片瀑布流实现
- jquery实现可旋转可拖拽的文字效果代码
- jquery+css3实现会动的小圆圈效果
- javascript jquery console调试方法说明
- jquery的调试利器:Firebug使用详解
- jquery $.post
- jQuery Validate验证框架详解(转)
- 源码来袭!!!基于jquery的ajax分页插件(demo+源码)
- 《锋利的JQuery》读书笔记(三)
- 《锋利的JQuery》读书笔记(二)
- js和jQuery实现获取id和点击checkbox全选功能
- 《锋利的JQuery》读书笔记(一)
- jQuery+css实现的切换图片功能代码
- jQuery+css实现的换页标签栏效果
- jquery实现折叠式(手拉风琴)菜单
- obj.offsetHeight与obj.style.height区别
- jQuery -- label赋值
- 20160127--Jquery的ajax与post使用