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 相关文章推荐
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
继续学习javascript闭包
Dec 03 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
关于js中的鼠标事件总结
Jul 11 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 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
php ImageMagick windows下安装教程
2015/01/26 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
js编写简易的计算器
2020/07/29 Javascript
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
Python2.x中文乱码问题解决方法
2015/06/02 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
Python实现手绘图效果实例分享
2020/07/22 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
《燕子》教学反思
2014/02/18 职场文书
销售总经理岗位职责
2014/03/15 职场文书
2015选调生工作总结
2015/07/24 职场文书
户外拓展训练感想
2015/08/07 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis