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 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
用jscript实现列出安装的软件列表
Jun 18 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
微信小程序云开发使用方法新手初体验
May 16 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
JS设计模式之单例模式(一)
2017/09/29 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
土木工程实习生自我鉴定
2013/09/19 职场文书
小学校园活动策划
2014/01/30 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
写给老师的保证书
2015/05/09 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python