繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jquery 插件实现图片延迟加载效果代码
- Javascript
- js中几种去掉字串左右空格的方法
- 判断两种颜色值是否为相似颜色
- 关于键盘事件中keyCode、which和charCode 的兼容性测试
- 提高 DHTML 页面性能
- 漂亮的Slider效果类终于封装成功
- 注释的艺术——JS里直接写HTML，无需转义
- 用javascript实现无刷新更新数据的详细步骤 asp
- Windows Live的@live.com域名注册漏洞 利用代码
- 只能输入小于最大数且是正整数的脚本
- 破除网页鼠标右键被禁用的绝招大全
- escape、encodeURI、encodeURIComponent等方法的区别比较
- URL编码转换,escape() encodeURI() encodeURIComponent()
- 使用javascript访问XML数据的实例
- ie和firefox中img对象区别的困惑
- utf8的编码算法 转载
- Javascript六种风格的时间显示方式
- JavaScript实现禁止后退的方法
- 从javascript语言本身谈项目实战
- 通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
- javascript实现划词标记划词搜索功能修正版
Javascript 中的 jquery 插件实现图片延迟加载效果代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 233 ::
收藏到网摘: 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
