jquery.lazyload插件实现图片延迟加载详解
什么是LazyLoad技术?
在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占了几百K的空间。Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的。
在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担,这样势必会引起速度上质的提升。
兼容:ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4,
chrome 3.0其中safari和chrome部分功能不支持。
Lazy Load 灵感来自 Matt Mlinac 制作的
YUI ImageLoader 工具箱. 这是演示页面。
原文的链接在:http://www.appelsiini.net/projects/lazyload
现在Lazy Load的版本已经是1.8.1
下载地址: http://www.jb51.net/jiaoben/63757.html
实例下载:
下载声明:
1. 注:此代码仅供学习交流,请勿用于商业用途。
2. 注:此代码仅供学习交流,请勿用于商业用途。
文件信息: 文件名: Lazy Load延迟加载图片实例
文件Hash:dd3e435124e377c2da33344d442f85d1
文件大小:1.1 MB
文件上传日期:2012 年 3 月 25 日
文件更新日期:2012 年 3 月 25 日
文件描述:在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占了几百K的空间。Lazy Load 是一个用
JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的。
怎样使用? 下面进入正题.Lazy Load 依赖于
jQuery. 请将下列代码加入页面 head 区域:
复制代码代码如下:
<script src="jquery.js"
type="text/javascript"></script>
<script src="jquery.lazyload.js"
type="text/javascript"></script>
Lazy Load的使用方法十分简单,但新版做了一些调整,必须修改<img>标签的属性。把<img>标签中的 src 属性改为等待图片的URL, data-original 属性填上真正的图片URL.
如下:
复制代码代码如下:
<img class="lazy" src="img/grey.gif"
data-original="img/example.jpg" width="640"
heigh="480">
建议:src中的等待图片,最好使用1像素的单色图片。
JS代码如下:
复制代码代码如下:
$("img.lazy").lazyload();
这样就能实现Lazy Load的效果了. Demo
看完Demo后,是不是觉得没什么效果出现?这个问题会在后面提到.
其实,并非一定要使用它规定的 data-original 属性来存放图片URL.你也可以自己定制别的属性名,如下:
<img class="lazy" src="img/grey.gif"
data-attr="img/example.jpg" width="640"
heigh="480">
JS代码如下:
复制代码代码如下:
$("img.lazy").lazyload({ data_attribute : "attr" });
只需设置 data_attribute 属性为对应的名称即可. (注意:html代码大小写不敏感!所以
"data-" 后面只能跟小写字母或数字.)
对于不支持JavaScript的浏览器,应该有相应的降级处理.
可以使用<noscript>标签,是用来定义在脚本未被执行时的替代内容/文本.而且这样做还有一个好处,因为搜索引擎的爬虫是不处理JavaScript脚本的,所以能直接抓到<noscript>标签中的内容.
复制代码代码如下:
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"
width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640"
heigh="480"></noscript>
CSS样式设置:
复制代码代码如下:
.lazy {
display: none;
}
JS代码:
复制代码代码如下:
$("img.lazy").show().lazyload();
设置图片加载的反应距离
Lazy Load插件默认的设置是:图片在浏览器窗口上出现,就会触发加载.但通过设置 threshold 属性的值,可以调整图片的预先加载位置/距离.
复制代码代码如下:
$("img.lazy").lazyload({ threshold : 200 });
另外, threshold 可以为正数或者负数.正数是预先加载, 假设数值为200, 则图片距离出现到屏幕还有 200px 时,就开始加载.如果是负数,则相反.假设数值为-200时,则图片已经在窗口出现,并且距离浏览器视窗底部的距离为 200px 时,才开始加载.
PS:图片和屏幕的距离是根据图片的 top 位置计算.
注意:threshold的设置需要考虑网站的长度和图片的高度,如果数值过大则会导致无法加载的问题.建议数值设置不要超过相应图片高度的一半.
通过事件触发加载
可以通过jQuery定义的事件来触发加载,也可以使用自己定义的事件.
复制代码代码如下:
$("img.lazy").lazyload({
event : "click"
});
实现动画效果
上面的Demo之所以会没有图片加载的效果,是因为Lazy Load默认的图片加载是通过 jQuery 的show()方法来显示,所以图片出现几乎是一瞬间.当然我们还可以实现其他效果.
复制代码代码如下:
$("img.lazy").lazyload({
effect : "fadeIn"
});
另外还可以使用 slideDown() 方法,但效果不佳.
如果想要控制动画的速度,还可以修改 effectspeed 属性.
复制代码代码如下:
$("img.lazy").lazyload({
effect : "fadeIn",
effectspeed : 1000
});
effectspeed 属性默认是空的,所以如果不设置它,动画的时间为400毫秒.
Container容器属性
当要延迟加载的图片全摆在一个容器中.只需把 container
属性指向摆放 img 的容器的对象.
css代码:
复制代码代码如下:
#container {
height: 600px;
overflow: scroll;
}
js代码:
复制代码代码如下:
$("img.lazy").lazyload({
container: $("#container")
});
废话不多说,直接看Demo ,不单竖着的可以, 横着也行Demo .
failure_limit的属性
Lazy Load 有一个循环查找 img 的机制.根据 HTML 文档的布局从上往下查找,当找到第一个并未显示/加载的 img 时,就会停止往下查找.(其实就是对 $("img.lazy") 这个对象(组)进行顺序查找)
那这个 failure_limit 的属性有什么用呢?
现在网站设计时,都会用到大量的定位样式,如: float 和 position , 这样在浏览器呈现的布局效果和 HTML 文档中的 DOM 顺序有很大差异.
这样就会存在一种情况,某 <img> 标签已出现在屏幕上,但它却无法显示!! 因为它在 HTML
文档中的实际位置排在了那些还没有显示的 <img> 标签后面, 这样会导致显示在屏幕上的这个 <img> 标签无法加载相应的图片.当Lazy Load 在找到第一个未显示的 <img> 标签时,查找已经被终止了, 并没有继续往下遍历.
所以这个时候,就可以使用failure_limit属性.
复制代码代码如下:
$("img.lazy").lazyload({
failure_limit : 10
});
这样 Lazy Load 会查找到第10个未显示的<img>标签处.当在图片多且布局复杂的页面时, failure_limit 的作用就很大了.
原文还温馨提示:If you have a funky layout set this number to
something high. 如果你的网站布局很"变态",建议把该值调得更高.
延迟下载图片
可以通过自定义事件,然后通过 setTimeout 来设置延迟触发该事件.
复制代码代码如下:
$(function() {
$("img:below-the-fold").lazyload({
event : "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function()
{$("img.lazy").trigger("sporty")},5000);
});
主要原理是,当 event 被设置为 scroll 以外的事件时, 实际上都会绑定了一个内置的 "appear" 事件.顾名思义, 这个事件就是用来显示图片的. (其实
scroll 也是调用这个事件)
skip_invisible 加载不可见的图片
Lazy Load 插件默认对隐藏的图片不加载(例如
display:none ). 这样做有助于性能的优化.如果希望连隐藏的图片一起加载,则可以把 skip_invisible 设为 false .
复制代码代码如下:
$("img.lazy").lazyload({
skip_invisible : false
});
jquery.lazyload插件实现图片延迟加载详解的更多相关文章
- jquery.lazyload插件实现图片延迟加载
jquery.lazyload是一个实现图片延迟加载的jQuery 插件,它可以延迟加载长页面中的图片.在浏览器可视区域外的图片在初始状态下不会被载入,直到用户将页面滚动到它们所在的位置. 1.引入j ...
- Jquery.LazyLoad.js实现图片延迟加载功能
从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案.没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了 ...
- jQuery前端插件以及图片延迟加载
插件名称 用途 插件官网地址 fontawsome CSS图标插件 http://fontawesome.io easyui 基于jQuery的用户界面插件集合 http://www.jeasyui. ...
- jquery图表插件morris.js参数详解和highcharts图表插件
一.morris.js 优点:轻巧.简单好用 缺点:没highcharts功能多,常用的足以 网址:http://morrisjs.github.io/morris.js/ 核心代码 1.head调用 ...
- jQuery lazyload插件详解和问题解答
lazyload插件用于图片延迟加载,节省服务器带宽,减少服务器请求次数,提高网站的页面加载速度,用于网站性能优化,只有当图片在窗口可视范围内时才向服务器请求: 参数: threshold:设置距离窗 ...
- 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...
- amazeui中的js插件有哪些(详解功能)
amazeui中的js插件有哪些(详解功能) 一.总结 一句话总结: 二.amazeui中的js插件有哪些 1.UI 增强 警告框Alert 按钮交互Button 折叠面板Collapse 下拉组件D ...
- jQuery中getJSON跨域原理详解
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp28 jQuery中getJSON跨域原理详解 前几天我再开发一个叫 河蟹工 ...
- PNG,JPEG,BMP,JIF图片格式详解及其对比
原文地址:http://blog.csdn.net/u012611878/article/details/52215985 图片格式详解 不知道大家有没有注意过网页里,手机里,平板里的图片,事实上,图 ...
随机推荐
- Gogoing的NABCD
特点之一:路线推荐 N 用户出行需要一个合理的路线计划 A 运用百度地图,还有根据自己的所想去的地方,推荐最省时间,最省钱的路线安排 B 方便用户出行,节约时间,节约金钱 C 对于旅行方面的App, ...
- spring冲刺第四天
昨天进行了地图的初步编写,但是存在BUG. 今天上网查找了错误的原因,改进了源代码,使程序可以执行. 遇到的问题;感觉地图界面太简单,需要作出更多的场景,这就需要不断的完善.
- Android笔记-2-TextView的属性详解
[Android 基础]TextView的属性详解 android:autoLink :设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web / ...
- 简单实现wc.exe软件基本功能
简单实现wc.exe软件基本功能 软件需求分析: 一.基本功能 支持 -c 统计字符数(char count) 支持 -w 统计单词数(word count) 支持 -l 统计总行数(line ...
- Enterprise Library 2.0 参考源码索引
http://www.projky.com/entlib/2.0/Microsoft/Practices/EnterpriseLibrary/Caching/BackgroundScheduler.c ...
- 通过分析java heap dump解决生产问题
最近在生产环境遇到一个问题,正常情况下,ECS CPU始终保持在10%以下,内存也只占用40%左右,但是连续2天出现了CPU占用100%的情况,然后系统卡住.看阿里云的ECS监控,能看到CPU飙到了1 ...
- 每个Android开发者必须知道的内存管理知识
原文:每个Android开发者必须知道的内存管理知识 拷贝在此处,以备后续查看. 相信一步步走过来的Android从业者,每个人都会遇到OOM的情况.如何避免和防范OOM的出现,对于每一个程序员来说确 ...
- Install .Net Core For CentOS
Install .NET Core SDK Before you start, please remove any previous versions of .NET Core from your s ...
- QString,string,char* 在utf8和gbk不同编码下的相互转化
关于编码简介:ascii编码是最开始的编码规则本,里面只收纳了英文.特殊字符.数字等有限字符,采用的是8位一个字节的方式进行编码对照:unicode在ascii码的基础上进行了升级扩展,立志将全世界所 ...
- BZOJ3329 Xorequ(数位dp+矩阵快速幂)
显然当x中没有相邻的1时该式成立,看起来这也是必要的. 于是对于第一问,数位dp即可.第二问写出dp式子后发现就是斐波拉契数列,矩阵快速幂即可. #include<iostream> #i ...