使用jquery插件实现图片延迟加载技术详细说明


Posted in Javascript onMarch 12, 2011

这里推荐使用jquery图片延迟加载插件jquery.lazyload实现图片延迟加载提高网站打开速度下载地址:http://www.appelsiini.net/download/jquery.lazyload.js

一、快速使用篇
1.导入JS插件

<script src="js\jquery.js" type="text/javascript"></script> 
<script src="js\jquery.lazyload.js" type="text/javascript"></script>

2.在你的页面中加入如下的javascript:
<script type="text/javascript"> 
$("img").lazyload(); 
</script>

这将会使所有的图片都延迟加载;
二、高级篇详细介绍(不想了解那么多的可以直接绕过)
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.
在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.
Lazy Load 灵感来自 Matt Mlinac 制作的 YUI ImageLoader 工具箱.
怎样使用?
Lazy Load 依赖于 jQuery. 请将下列代码加入页面 head 区域:
<script src="jquery.js" type="text/javascript"></script> 
<script src="jquery.lazyload.js" type="text/javascript"></script>

并且在你的执行代码中加入下面语句:
$("#xd").lazyload();

这将使id=”xd” 区域下的图片将被延迟加载.
设置敏感度
插件提供了 threshold 选项, 可以通过设置临界值 (触发加载处到图片的距离) 来控制图片的加载. 默认值为 0 (到达图片边界的时候加载).
view sourceprint?$("#xd").lazyload({ threshold : 200 });
将临界值定为 200, 当可视区域离图片还有 200 个象素的时候开始加载图片. (这一句原文的字面意思和本人理解不一致, 原文: Setting threshold to 200 causes image to load 200 pixels before it is visible.)
占位图片
你还可以设定一个占位图片并定义事件来触发加载动作. 这时需要为占位图片设定一个 URL 地址. 透明, 灰色和白色的 1×1 象素的图片已经包含在插件里面.
$("img").lazyload({ placeholder : "img/grey.gif" });

事件触发加载
事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:
$("img").lazyload({ 
placeholder : "img/grey.gif", 
event : "click" 
});

使用特效
当图片完全加载的时候, 插件默认地使用 show() 方法来将图显示出来. 其实你可以使用任何你想用的特效来处理. 下面的代码使用 FadeIn 效果. 这是演示页面.
$("img").lazyload({ 
placeholder : "img/grey.gif", 
effect : "fadeIn" 
});

图片在容器里面
你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面. 这是水平滚动演示页面和垂直滚动的演示页面.
CSS 代码:
#container { height: 600px;overflow: scroll; }
JavaScript 代码:
$("img").lazyload({ 
placeholder : "img/grey.gif", 
container: $("#container") 
});

当图片不顺序排列
滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.
$("img").lazyload({ 
failurelimit : 10 
});

将 failurelimit 设为 10 令插件找到 10 个不在可见区域的图片是才停止搜索. 如果你有一个猥琐的布局, 请把这个参数设高一点.
延迟加载图片
Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载. 这是延迟加载演示页面.
$(function() { 
$("img:below-the-fold").lazyload({ 
placeholder : "img/grey.gif", 
event : "sporty" 
}); 
}); 
$(window).bind("load", function() { 
var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000); 
});
Javascript 相关文章推荐
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 Javascript
thinkjs 文件上传功能实例代码
Nov 08 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 #Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 #Javascript
JavaScript全局函数使用简单说明
Mar 11 #Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 #Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 #Javascript
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 #Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 #Javascript
You might like
Laravel5权限管理方法详解
2016/07/26 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
一些技巧性实用js代码小结
2009/10/14 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
横向对比分析Python解析XML的四种方式
2016/03/30 Python
详解Python if-elif-else知识点
2018/06/11 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
Python读写文件基础知识点
2019/06/10 Python
基于python实现文件加密功能
2020/01/06 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
幼儿园元旦活动感言
2014/03/02 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
同事离别感言
2015/08/04 职场文书
幼儿园大班教学反思
2016/03/02 职场文书