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 相关文章推荐
javascript 学习之旅 (3)
Feb 05 Javascript
js左侧多级菜单动态的解决方案
Feb 01 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
实例浅析js的this
Dec 11 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 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 一个页面执行时间类代码
2010/03/05 PHP
php实现点击可刷新验证码
2015/11/07 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
csdn 批量接受好友邀请
2009/02/19 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
详解Python字符串对象的实现
2015/12/24 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
大课间体育活动方案
2014/03/12 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
北京奥运会主题口号
2014/06/13 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
信用卡工资证明格式
2014/09/13 职场文书
美术教师求职信范文
2015/03/20 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
公司市场部岗位职责
2015/04/15 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript