基于jquery的lazyloader插件实现图片的延迟加载[简单使用]
2023-06-13 09:14:28 时间
通过使用jquery的lazyloader插件可以实现图片的延迟加载,当网页比较长的时候,会先只加载用户视窗内的图片,视窗外的图片会等到你拖动滚动条至后面才加载,这样有效的避免了因图片过多而加载慢的弊端。
使用lazyloader插件很简单,只要在页面中引入lazyloader插件,然后为页面上的图片调用延迟加载方法就可以了。lazyloader插件的下载地址:http://www.appelsiini.net/projects/lazyload。下面先看看具体的使用方法:
复制代码代码如下:
使用lazyloader插件很简单,只要在页面中引入lazyloader插件,然后为页面上的图片调用延迟加载方法就可以了。lazyloader插件的下载地址:http://www.appelsiini.net/projects/lazyload。下面先看看具体的使用方法:
<scripttype="text/javascript"src="jquery.js"></script>
<scripttype="text/javascript"src="jquery.lazyload.js"></script>
<scripttype="text/javascript">
$(document).ready(
function(){
$("img").lazyload({
placeholder:"images/grey.gif",
effect:"fadeIn"
});
});
</script>
Jquery.LazyLoad.js插件参数详解:
1,用图片提前占位
placeholder:"img/grey.gif",
参数:placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
2,载入使用何种效果
effect:"fadeIn",
参数:effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
3,提前开始加载
threshold:200,
参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.
4,事件触发时才加载
event:"click",
参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
5,对某容器中的图片实现效果
container:$("#container"),
参数:container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
6,图片排序混乱时
failurelimit:10,
参数:failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
相关文章
- 利用Jquery Lazyload JS插件实现网页图片延迟加载
- 基于jQuery或Zepto的图片延迟加载插件
- 实现单页浮动导航效果的 jQuery 插件:Smint
- jquery.jCal.js显示日历插件详解编程语言
- jQuery插件开发详解编程语言
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js详解编程语言
- jquery插件实现图片延迟加载效果代码
- 一步一步制作jquery插件Tabs实现过程
- 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
- jquery$.fn$.fx是什么意思有什么用
- jquery插件开发之实现md5插件
- jQuery实现的多选框多级联动插件
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- 自定义jquery模态窗口插件无法在顶层窗口显示问题
- 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
- AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
- JQuery插件iScroll实现下拉刷新,滚动翻页特效
- 在浏览器中实现图片粘贴的jQuery插件--pasteimg使用指南
- jQuery实现ichat在线客服插件
- jquery实现在页面加载的时自动为日期插件添加当前日期