繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jquery 插件实现图片延迟加载效果代码
- Javascript
- JavaScript 解析Json字符串的性能比较分析代码
- js 日期字符串截取分割成单个具体的日期(2009-12-30 13:28:29)
- javascript 倒计时代码
- javascript 语法基础 想学习js的朋友可以看看
- javascript获取元素文本内容的通用函数
- javascript 动态设置已知select的option的value值的代码
- jquery 简单的图片展示效果
- js textarea自动增高并隐藏滚动条
- Javascript 中介者模式实例
- textbox 在光标位置插入字符功能的js实现(兼容ie,firefox)
- jQuery Attributes(属性)的使用(二、类篇)
- Javascript document.referrer判断访客来源网址
- [原创]javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox]
- javascript获得光标所在的文本框(text/textarea)中的位置
- event.srcElement 用法笔记e.target
- javascript 导出数据到Excel(处理table中的元素)
- javascript DOM操作之动态删除TABLE多行
- Javascript在IE或Firefox下获取鼠标位置的代码
- Javascript 多浏览器兼容性问题及解决方案
- 让div层随鼠标移动的实现代码 ie ff
Javascript 中的 jquery 插件实现图片延迟加载效果代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 127 ::
收藏到网摘: n/a
前几天上QQ的在线视频网站，看到上面的影片列表页的图片有这样一种效果：当向下拉动滚动条时下面的图片才开始加载，就是说它不会一下子把所有的图片都加载出来，拉动滚动条后用户看到了才会显示，这是一个很不错的用户体验。 减少了页面加载的时间了，也减轻了服务器的压力，看了一下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
评论 (0) All
