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 相关文章推荐
js动态加载以及确定加载完成的代码
Jul 31 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 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
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
js 动态文字滚动的例子
2011/01/17 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
python写日志封装类实例
2015/06/28 Python
python开发中range()函数用法实例分析
2015/11/12 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
python try except 捕获所有异常的实例
2018/10/18 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
python数据归一化及三种方法详解
2019/08/06 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
用python制作个音乐下载器
2021/01/30 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
Python实现批量自动整理文件
2022/03/16 Python