繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jquery 插件实现图片延迟加载效果代码
- Javascript
- jquery 弹出层实现代码
- jQuery 扩展对input的一些操作方法
- 扩展jQuery 键盘事件的几个基本方法
- Iframe 自适应高度并实时监控高度变化的js代码
- CCPry JS类库 代码
- jquery text()要注意啦
- json 入门基础教程 推荐
- json 实例详细说明教程
- JavaScript中的JSON 中文版翻译
- javascript GUID生成器实现代码
- DOM 脚本编程中的兄弟节点
- JavaScript Sort 表格排序
- 提高网站性能之 如何对待JavaScript
- js 函数的执行环境和作用域链的深入解析
- 键盘 keycode的值 javascript时触发事件时很有用的要素
- cnblogs csdn 代码运行框实现代码
- 简单实用的HTML到UBB转换脚本工具实现说明
- Javascript结合css实现网页换肤功能
- JQuery 网站换肤功能实现代码
- JS OOP包机制,类创建的方法定义
Javascript 中的 jquery 插件实现图片延迟加载效果代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 108 ::
收藏到网摘: 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
