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 相关文章推荐
jQuery html()等方法介绍
Nov 18 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
vue实现购物车列表
Jun 30 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
PHP Global定义全局变量使用说明
2013/08/15 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
wxpython实现图书管理系统
2018/03/12 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
python实现logistic分类算法代码
2020/02/28 Python
Python高并发和多线程有什么关系
2020/11/14 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
建筑人员岗位职责
2013/12/25 职场文书
项目经理任命书内容
2014/06/06 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书