繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jquery 插件实现图片延迟加载效果代码
- Javascript
- javascript中的有名函数和无名函数
- javascript[js]获取url参数的代码
- javascript select 之间传值效果的代码
- js正则实现的密码框简单制作,还可以替换成自己想用得符号
- 脚本控制自适应高度的缩短问题
- 兼容ie和firefox版本的js反选 全选 多选框
- javascript 随机数 与高级应用 附vbscript(asp) 随机数总结
- 不用确认即可打印的javascript代码
- 推荐自用 Javascript 缩图函数 (onDOMLoaded)……
- 用javascript实现div可编辑的常见方法
- 用JavaScript实现的一个IP地址输入框
- 用javascript取得传递参数的个数的代码
- 当鼠标移出灰色区域时候,菜单项怎么隐藏起来
- 才发现的超链接js导致网页中GIF动画停止的解决方法
- javascript window.onerror事件学习新收获
- javascript 如何生成不重复的随机数
- 超个性的导航效果
- 不能再简单的无闪刷新验证码原理很简单
- 经常用到的javascript验证函数收集
- 用js实现手把手教你月入万刀(转贴)
Javascript 中的 jquery 插件实现图片延迟加载效果代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 365 ::
收藏到网摘: 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
