jquery 插件实现图片延迟加载效果代码


Posted in Javascript onFebruary 06, 2010

减少了页面加载的时间了,也减轻了服务器的压力,看了一下javascript源码,里面写的了lazyload,我就百度了一下,找到了一个jquery的实现这种效果的插件:jquery.lazyload,一个很不错的插件。
比如你打开一个比较大或者长的网页,那么Lazy load能够实现先加载您所看到区域的图片,等你滚动到哪里,就加载那里的图片。
如果你是图片网站,而且一个页面要加载很多图片,这个插件是个很不错的选择。
如何使用,引用如下js:
查看源代码打印帮助

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

在你的页面中加入如下的javascript:
查看源代码打印帮助1 $("img").lazyload();
这将会使所有的图片都延迟加载。插件还有几个配置项可供设置。
当然对于一些用户来说就上面的功能远远是不能达到要求的,下面我们看看是如何设置灵敏度的。我们可以设置阀值来控制 这个功能比较人性化吧。
$(“img”).lazyload({ threshold : 200 });
把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件
查看源代码打印帮助
$("img").lazyload({ 
placeholder : "img/grey.gif", 
event : "click" 
});

我们还可以通过定义effect 参数来定义一些图片显示效果
查看源代码打印帮助
$("img").lazyload({ 
placeholder : "img/grey.gif", 
effect : "fadeIn" 
});

下载地址: source, minified or packed
Javascript 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
JavaScript下拉菜单功能实例代码
Mar 01 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 Javascript
javascript实现计算器功能详解流程
Nov 01 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 #Javascript
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 #Javascript
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 #Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 #Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 #Javascript
JavaScript学习笔记(十七)js 优化
Feb 04 #Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 #Javascript
You might like
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
python实现计算倒数的方法
2015/07/11 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
德国网上花店:Valentins
2018/08/15 全球购物
String和StringBuffer的区别
2015/08/13 面试题
品酒会策划方案
2014/05/26 职场文书
国贸专业求职信
2014/06/28 职场文书
检讨书范文2000字
2015/01/28 职场文书
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技