前端资源预加载并突显进程条
2015/09/30 · JavaScript
· 预加载
原稿出处:
吕大豹
咱俩平日会看出,一些站点在第一次进入的时候会先出示一个进程条,等资源加载完成后再显示页面,大约像那样:
下一场馆有页面的操作就会极度流畅,因为将来没要求再等待加载资源了。越发是在移动端,或者是页游中,那样做能幸免页面出现白屏(等待加载图片),很大程度升高用户体验。那那种技术是什么贯彻的呢?其实卓殊简单,本文就来从基础细节探讨一番。
预加载图片是拉长用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺遂地在你的网站上冲浪,并分享到极快的加载速度。那对图片画
廊及图片占据很大比重的网站的话极度方便,它保障了图片很快、无缝地发表,也可帮助用户在浏览你网站内容时收获更好的用户体验。本文将享用多少个不等的预加
载技术,来增加网站的属性与可用性。
预加载图片是增强用户体验的一个很好办法。图片预先加载到浏览器中,访问者便可顺利地在您的网站上冲浪,并享受到极快的加载速度。这对图纸画廊及图片占据很大比重的网站的话分外有益,它保险了图片快捷、无缝地公布,也可扶助用户在浏览你网站内容时得到更好的用户体验。本文将分享七个例外的预加载技术,来增强网站的性质与可用性。
心想事成图片预加载的三大方法及优缺点分析,三大优缺点
预加载图片是增高用户体验的一个很好点子。图片预先加载到浏览器中,访问者便可顺遂地在您的网站上冲浪,并分享到极快的加载速度。那对图片画廊及图片占据很大比例的网站来说尤其有益于,它保险了图片疾速、无缝地发表,也可协助用户在浏览你网站内容时得到更好的用户体验。本文将分享八个差距的预加载技术,来夯实网站的特性与可用性。
艺术一:用CSS和JavaScript完结预加载
心想事成预加载图片有为数不少措施,包蕴使用CSS、JavaScript及二者的各类组合。这个技能可根据不同规划场景设计出相应的解决方案,万分便捷。
独自利用CSS,可简单、高效地预加载图片,代码如下:
复制代码 代码如下:
#preload-01 { backgroundnull:url()
no-repeat -9999px -9999px; }
#preload-02 { backgroundnull:url()
no-repeat -9999px -9999px; }
#preload-03 { backgroundnull:url()
no-repeat -9999px -9999px; }
将那么些ID选取器应用到(X)HTML元素中,大家便可经过CSS的background属性将图片预加载到屏幕外的背景上。只要这个图片的不二法门保持不变,当它们在Web页面的别的地点被调用时,浏览器就会在渲染进程中应用预加载(缓存)的图片。简单、高效,不须要其余JavaScript。
该方法固然很快,但仍有改正余地。使用该法加载的图片会同页面的其他情节一起加载,增添了页面的完好加载时间。为了化解这么些标题,大家扩大了有的JavaScript代码,来延缓预加载的时刻,直到页面加载达成。代码如下:
复制代码 代码如下:
// better image preloading @ <A
href=”;
function preloader() {
if (document.getElementById) {
document.getElementById(“preload-01”).style.background =
“url() no-repeat -9999px -9999px”;
document.getElementById(“preload-02”).style.background =
“url() no-repeat -9999px -9999px”;
document.getElementById(“preload-03”).style.background =
“url() no-repeat -9999px -9999px”;
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
亚洲必赢官网, if (typeof window.onload != ‘function’) {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);
在该脚本的率先片段,我们收获使用类选拔器的因素,并为其设置了background属性,以预加载不一样的图形。
该脚本的第二局地,大家接纳addLoad伊夫nt()函数来贻误preloader()函数的加载时间,直到页面加载达成。
比方JavaScript不能在用户的浏览器中正常运作,会爆发什么?很不难,图片不会被预加载,当页面调用图片时,正常呈现即可。
艺术二:仅使用JavaScript落成预加载
上述方法有时实在很迅猛,但大家逐渐察觉它在实际上落到实处进度中会成本太多日子。相反,我更欣赏使用纯JavaScript来贯彻图片的预加载。下边将提供二种那样的预加载方法,它们能够很美丽地工作于拥有现代浏览器之上。
JavaScript代码段1
只需简单编辑、加载所必要图片的路线与名称即可,很简单完成:
复制代码 代码如下:
<div class=”hidden”>
<script type=”text/javascript”>
<!–//–><![CDATA[//><!– var
images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
“”,
“”,
“”
)
//–><!]]> </script>
</div>
该措施越发适用预加载大批量的图片。我的画廊网站选拔该技能,预加载图片数量达50多张。将该脚本利用到登录页面,只要用户输入登录帐号,大多数画廊图片将被预加载。
JavaScript代码段2
该措施与地点的主意类似,也足以预加载任意数量的图形。将上边的剧本添参加别的Web页中,依照程序指令进行编辑即可。
复制代码 代码如下:
<div class=”hidden”>
<script type=”text/javascript”>
<!–//–><![CDATA[//><!– if
(document.images) {
img1 = new Image();
img2 = new Image();
img3 = new Image();
img1.src = “”;
img2.src = “”;
img3.src = “”;
}
//–><!]]> </script>
</div>
正如所看见,每加载一个图纸都亟需创立一个变量,如“img1 = new
Image();”,及图片源地址注脚,如“img3.src =
“../path/to/image-003.gif”;”。参考该形式,你可依据须要加载任意多的图形。
咱俩又对该形式开展了改革。将该脚本封装入一个函数中,并行使
addLoad伊夫nt(),延迟预加载时间,直到页面加载完成。
复制代码 代码如下:
function preloader() {
if (document.images) {
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
img1.src = “”;
img2.src = “”;
img3.src = “”;
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != ‘function’) {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);
主意三:使用Ajax完毕预加载
地方所付出的主意如同不够酷,这现在来看一个运用Ajax完成图片预加载的章程。该办法运用DOM,不仅仅预加载图片,还会预加载CSS、JavaScript等连锁的东西。使用Ajax,比一贯动用JavaScript,优越之处在于JavaScript和CSS的加载不会影响到眼前页面。该办法不难、高效。
复制代码 代码如下:
window.onload = function() {
setTimeout(function() {
// XHR to request a JS and a CSS var xhr = new
XMLHttpRequest();
xhr.open(‘GET’, ”);
xhr.send(”);
xhr = new XMLHttpRequest();
xhr.open(‘GET’, ”);
xhr.send(”);
// preload image new Image().src =
“”;
}, 1000);
};
上面代码预加载了“preload.js”、“preload.css”和“preload.png”。1000微秒的晚点是为着避防脚本挂起,而造成健康页面出现成效难题。
JavaScript及Ajax落成图片预加载的三大形式,前端资源预加载并显示进程条。下边,大家看看哪些用JavaScript来落到实处该加载进度:
复制代码 代码如下:
window.onload = function() {
setTimeout(function() {
// reference to <head>
var head = document.getElementsByTagName(‘head’)[0];
// a new CSS
var css = document.createElement(‘link’);
css.type = “text/css”;
css.rel = “stylesheet”;
css.href = “”;
// a new JS
var js = document.createElement(“script”);
js.type = “text/javascript”;
js.src = “”;
// preload JS and CSS head.appendChild(css);
head.appendChild(js);
// preload image
new Image().src = “”;
}, 1000);
};
此间,大家经过DOM创设多少个因一贯促成两个文本的预加载。正如上边提到的那么,使用Ajax,加载文件不会选拔到加载页面上。从那点上看,Ajax方法优越于JavaScript。
好了,本文就先介绍到此地,三种完结图片预加载技术的措施大家都早就通晓了吗,具体哪个更便捷,我想小伙伴们也都看出来了,那就动用到温馨的花色中呢。
预加载图片是提升用户体验的一个很好点子。图片预先加载到浏览器中,访问者便可…
缘何需求资源预加载
大抵时候,大家的页面并不是三次渲染达成的,而是趁着用户的操作,不断修改DOM节点,假诺你动态插入了一个图纸节点,那么浏览器要立时发一个http请求,把图片加载下来然后渲染在页面上,如果用户此时的网速不佳,那么加载那张图片可能就会损耗几分钟时间,此时页面上怎样都没有(白屏)。最坏的动静,就算你的行使图片很多,半天加载不出几张图,用户很可能就在白屏的那几秒跳走了。在游玩中更要紧,主演的图样倘使加载不出来,让用户玩空气去?
而外在DOM中插入图片节点,其余凡是涉及到要来得一张新图片的操作,浏览器都得即时去乞求图片。比如,为某个节点添加如下css类来充实背景图片:
CSS
.bg1{ backgroundnull:url(); }
1
2
3
|
.bg1{
background: url(http://p2.qhimg.com/t01ed1438874f940dc0.jpg);
}
|
依旧是动态修改了src属性、在canvas绘制图片等,这个都会立马请求新资源。
那就是说,资源预加载为啥能化解上述难点吧?
大家预加载的资源,浏览器会缓存下来,再度利用的时候,浏览器会检讨是还是不是早已在缓存中,如若在,则平昔用缓存的资源,不发送请求,或者由服务端再次回到304
not
modified(304只带请求头消息,不传输资源)。那样使用一张图纸的时间会大大减弱,大家的页面看起来会要命流利,大妈再也不用担心用户会跳走了~
也就是说,预加载的资源大家并不须要手动保存,由浏览器自动放到缓存了。
主意一:用CSS和JavaScript达成预加载
心想事成预加载图片有不少方法,包罗使用CSS、JavaScript及二者的种种组合。这么些技能可根据差距规划场景设计出相应的缓解方案,格外飞快。
偏偏利用CSS,可不难、高效地预加载图片,代码如下:
Html代码
- #preload-01 { background: url() no-repeat -9999px -9999px; }
- #preload-02 { background: url() no-repeat -9999px -9999px; }
- #preload-03 { background: url() no-repeat -9999px -9999px; }
将那五个ID选用器应用到(X)HTML元素中,我们便可透过CSS的background属性将图纸预加载到屏幕外的背景上。只要这个图片的路径
保持不变,当它们在Web页面的其他地点被调用时,浏览器就会在渲染进程中应用预加载(缓存)的图片。简单、高效,不须求任何JavaScript。
该方法就算很快,但仍有改良余地。使用该法加载的图片会同页面的其余内容一起加载,扩大了页面的完好加载时间。为了缓解那几个问题,大家增加了有的JavaScript代码,来推迟预加载的年华,直到页面加载已毕。代码如下:
Js代码
- // better image preloading
- function preloader() {
- if (document.getElementById) {
- document.getElementById(“preload-01”).style.background = “url() no-repeat -9999px -9999px”;
- document.getElementById(“preload-02”).style.background = “url() no-repeat -9999px -9999px”;
- document.getElementById(“preload-03”).style.background = “url() no-repeat -9999px -9999px”;
- }
- }
- function addLoadEvent(func) {
- var oldonload = window.onload;
- if (typeof window.onload != ‘function’) {
- window.onload = func;
- } else {
- window.onload = function() {
- if (oldonload) {
- oldonload();
- }
- func();
- }
- }
- }
- addLoadEvent(preloader);
在该脚本的第一有的,大家获得使用类拔取器的因素,并为其设置了background属性,以预加载差别的图形。
该脚本的第二有的,我们利用addLoad伊芙nt()函数来延缓preloader()函数的加载时间,直到页面加载达成。
假定JavaScript不能在用户的浏览器中健康运行,会生出什么?很粗略,图片不会被预加载,当页面调用图片时,正常显示即可。
方法一:用CSS和JavaScript落成预加载
资源预加载的场景
哪些的连串须要预加载资源呢?
范围应该锁定单页面应用,SPA的视图一般都是一步一步来突显的,种种资源通过异步请求来获得,为了追求原生app般的流畅体验,可以把一部分资源预加载下来。当然对于有些作业有关的图纸资源,也可考虑延迟加载,但延迟加载不是本文商讨的框框。
视图/图片较多的专题页面,或者是亟需逐帧图片来形成的动画效果,最好都要做预加载。
HTML5嬉戏,图片一般都相比多,而且许多逐帧动画,必必要预加载,事实上部分游玩引擎都会提供相应成效。
哪些资源须求预加载呢?
web中带有的资源有许各种,图片、音视频之类的媒体文件,其它就是js、css文件,那一个都亟待发送请求来赢得。那那些资源难道我们都预加载?
当然不是了,预加载也是亟需消耗时间的,总无法让用户等你加载个几十分钟吧。具体预加载哪些资源,须要基于实际的设想,也跟你的类型有关。以下是有些本人的想法:
js、css文件不需进行预加载。现在写js基本都用requirejs之类的加载器,而且最后都会展开削减合并,将请求数降到最低,最后唯有一个文件,有些团队依旧还将削减后的代码直接放在行内,这样一个结余的乞请都未曾了。
那么须要预加载的就是媒体文件了,图片、音视频之类。那类资源也得依据实际意况来抉择如何需求预加载。比如多数页面装饰性图片就须要预加载,而由工作动态获取的图形则无从预加载(预先不掌握地点)。用作音效、小动画的音摄像可以预加载,一个半小时长的摄像就不可能预加载了。
主意二:仅使用JavaScript达成预加载
上述措施有时实在很高效,但大家稳步发现它在实际上贯彻进程中会开销太多时光。相反,我更欣赏使用纯JavaScript来落到实处图片的预加载。下边将提供二种那样的预加载方法,它们得以很美丽地干活于具有现代浏览器之上。
JavaScript代码段1
只需简单编辑、加载所急需图片的门道与名称即可,很简单完结:
Html代码
- <div>
- <script type=”text/javascript”>
- <!–//–><![CDATA[//><!–
- var images = new Array()
- function preload() {
- for (i = 0; i < preload.arguments.length; i++) {
- images[i] = new Image()
- images[i].src = preload.arguments[i]
- }
- }
- preload(
- “”,
- “”,
- “”
- )
- //–><!]]>
- </script>
- </div>
该方法尤其适用预加载多量的图样。我的画廊网站使用该技术,预加载图片数量达50多张。将该脚本利用到登录页面,只要用户输入登录帐号,半数以上画廊图片将被预加载。
JavaScript代码段2
该方法与地方的法子类似,也足以预加载任意数量的图片。将上边的脚本添加入此外web页中,根据程序指令举办编辑即可。
Html代码
- <div>
- <script type=”text/javascript”>
- <!–//–><![CDATA[//><!–
- if (document.images) {
- img1 = new Image();
- img2 = new Image();
- img3 = new Image();
- img1.src = “”;
- img2.src = “”;
- img3.src = “”;
- }
- //–><!]]>
- </script>
- </div>
正如所看见,每加载一个图片都亟需创制一个变量,如“img1 = new
Image();”,及图片源地址声明,如“img3.src
=“../path/to/image-003.gif”;”。参考该形式,你可依照必要加载任意多的图样。
大家又对该办法开展了改良。将该脚本封装入一个函数中,并拔取addLoad伊夫nt(),延迟预加载时间,直到页面加载达成。
Js代码
- function preloader() {
- if (document.images) {
- var img1 = new Image();
- var img2 = new Image();
- var img3 = new Image();
- img1.src = “”;
- img2.src = “”;
- img3.src = “”;
- }
- }
- function addLoadEvent(func) {
- var oldonload = window.onload;
- if (typeof window.onload != ‘function’) {
- window.onload = func;
- } else {
- window.onload = function() {
- if (oldonload) {
- oldonload();
- }
- func();
- }
- }
- }
- addLoadEvent(preloader);
完结预加载图片有诸多艺术,包蕴利用CSS、JavaScript及互相的各样组合。那些技巧可按照差距规划场景设计出相应的化解方案,格外便捷。
仅仅施用CSS,可不难、高效地预加载图片,代码如下:
#preload-01 { background: url(image-01.png) no-repeat -9999px -9999px;
}
#preload-02 { background: url(image-02.png) no-repeat -9999px -9999px;
}
#preload-03 { background: url(image-03.png) no-repeat -9999px -9999px;
}
将这三个ID拔取器应用到(X)HTML元素中,我们便可通过CSS的background属性将图纸预加载到屏幕外的背景上。只要这一个图片的路子保持不变,当它们在Web页面的其余地方被调用时,浏览器就会在渲染进程中使用预加载(缓存)的图形。不难、高效,不须要其余JavaScript。
该措施尽管高速,但仍有改进余地。使用该法加载的图形会同页面的此外情节一起加载,增加了页面的完整加载时间。为精晓决这些题材,大家增加了一部分JavaScript代码,来推延预加载的大运,直到页面加载达成。代码如下:
function preloader() {
if (document.getElementById) {
document.getElementById(“p1”).style.background =
“url(image-01.png) no-repeat”;
document.getElementById(“p2”).style.background =
“url(image-02.png) no-repeat”;
document.getElementById(“p3”).style.background =
“url(image-03.png) no-repeat”;
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != ‘function’) {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);
预加载的原理与加载进度的拿走
地方都是坐而论道的有的看法,下面大家该从技术的角度来揣摩一下预加载该怎么贯彻。
规律其实也非常不难,就是维护一个资源列表,挨个去加载列表中的资源,然后在各类资源加载成功的回调函数中更新速度即可。
以图表为例,大致的代码应该是那般:
JavaScript
var image = new Image(); image.onload = function(){}; image.onerror =
function(){}; image.src = url;
1
2
3
4
|
var image = new Image();
image.onload = function(){};
image.onerror = function(){};
image.src = url;
|
诸如此类就OK啦,图片已经进缓存,留着今后使用呢。
况且进度,那一个速度严谨来讲并不是文件加载的实时进程,因为大家不得不在每个文件加载成功的时候实施回调,不能像timeline中那样获得文件加载的实时进程。
总结办法就很简短了,当前加载完的资源个数/资源总数*100,就是加载进程的比例了。
措施三:使用Ajax达成预加载
地点所提交的章程似乎不够酷,那现在来看一个行使Ajax落成图片预加载的措施。该方式应用DOM,不仅仅预加载图片,还会预加载CSS、
JavaScript等有关的东西。使用Ajax,比直接使用JavaScript,优越之处在于JavaScript和CSS的加载会潜移默化到当下页面,而Ajax不会,使用Ajax该方法容易、高效。
Js代码
- window.onload = function() {
- setTimeout(function() {
- // XHR to request a JS and a CSS
- var xhr = new XMLHttpRequest();
- xhr.open(‘GET’, ”);
- xhr.send(”);
- xhr = new XMLHttpRequest();
- xhr.open(‘GET’, ”);
- xhr.send(”);
- // preload image
- new Image().src = “”;
- }, 1000);
- };
地点代码预加载了“preload.js”、“preload.css”和“preload.png”。1000飞秒的晚点是为着防备脚本挂起,而造成健康页面出现功用难点。
上面,大家看看哪些用JavaScript来落到实处该加载进度:
Js代码
- window.onload = function() {
- setTimeout(function() {
- // reference to <head>
- var head = document.getElementsByTagName(‘head’)[0];
- // a new CSS
- var css = document.createElement(‘link’);
- css.type = “text/css”;
- css.rel = “stylesheet”;
- css.href = “”;
- // a new JS
- var js = document.createElement(“script”);
- js.type = “text/javascript”;
- js.src = “”;
- // preload JS and CSS
- head.appendChild(css);
- head.appendChild(js);
- // preload image
- new Image().src = “”;
- }, 1000);
- };
此地,大家因而DOM创造七个因向来落到实处多个文件的预加载。正如上面提到的那么,使用Ajax,加载文件不会使用到加载页面上。从那一点上看,Ajax方法优越于JavaScript。
在该脚本的率先部分,我们获得使用类选取器的元素,并为其安装了background属性,以预加载差别的图样。
该脚本的第二有些,大家应用addLoad伊夫nt()函数来推延preloader()函数的加载时间,直到页面加载完结。
若是JavaScript不能在用户的浏览器中正常运转,会发出什么样?很简短,图片不会被预加载,当页面调用图片时,正常突显即可。
资源预加载小插件:resLoader.js介绍
正文的根本终于来了。。。额
据悉地方的规律,我写了一个插件,用来做资源预加载。
拥有的性状如下:
-
自定义资源列表,用于预加载
-
自定义onProgress,想展现成进程条如故百分比数字或者个性的设计都可
-
发轫和终止可配置回调函数
-
只扶助图片的预加载
-
辅助amd、cmd加载器加载,同时辅助直接用<script>标签引入使用
-
不依靠其余库
用法如下:
JavaScript
var loader = new resLoader({ resources : [
”,
”,
”,
”,
”,
”,
”,
”,
”,
”,
” ], onStart :
function(total){ console.log(‘start:’+total); }, onProgress :
function(current, total){ console.log(current+’/’+total); var percent =
current/total*100; $(‘.progressbar’).css(‘width’, percent+’%’);
$(‘.progresstext .current’).text(current); $(‘.progresstext
.total’).text(total); }, onComplete : function(total){
alert(‘加载达成:’+total+’个资源’); } }); loader.start();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
var loader = new resLoader({
resources : [
‘http://p2.qhimg.com/t01ed1438874f940dc0.jpg’,
‘http://p9.qhimg.com/t01b4ff03b72c7dc6c7.jpg’,
‘http://p2.qhimg.com/t01dd90dfbec92074d0.jpg’,
‘http://p7.qhimg.com/t01cfec6d87cde457c5.jpg’,
‘http://p9.qhimg.com/t01943ced462da67833.jpg’,
‘http://p0.qhimg.com/t01943ced462da67833.jpg’,
‘http://p6.qhimg.com/t01aa15a7ba7ccb49a7.jpg’,
‘http://p8.qhimg.com/t010f1e8badf1134376.jpg’,
‘http://p8.qhimg.com/t01cf37ea915533a032.jpg’,
‘http://p3.qhimg.com/t0193d8a3963e1803e9.jpg’,
‘http://p3.qhimg.com/t01cd6a4d4b4bd4457b.jpg’
],
onStart : function(total){
console.log(‘start:’+total);
},
onProgress : function(current, total){
console.log(current+’/’+total);
var percent = current/total*100;
$(‘.progressbar’).css(‘width’, percent+’%’);
$(‘.progresstext .current’).text(current);
$(‘.progresstext .total’).text(total);
},
onComplete : function(total){
alert(‘加载完毕:’+total+’个资源’);
}
});
loader.start();
|
各项参数都一贯精晓,不再多说了。在上面的例子中,我要好定义onProgress函数,做了一个大致的进度条,你也足以做其余已毕。函数为你传入了current和total,分别代表近日达成的资源个数和资源总个数,可用以总计进度。
职能可看在线demo:点击那里
除此以外附上下载地址,感兴趣的意中人可以拿去行使:
艺术二:仅使用JavaScript完成预加载
再多说两句,关于xhr2新特点
面前的废话貌似有些多。。。想直接用插件的下载下去用就好,有难点在此留言啄磨。
此处想多说的事物是关于加载进程的,我下边说了大家只可以取获得的是速度其实是离散的点,不是连连的。其实接纳HTML5的xhr2的新特性大家也可以尝试获得更加可相信的快慢。因为xhr2新增了一个万分有意思的表征:可以从服务端获取文件数量。我们原先从服务端重回的数据都是字符串,现在可以直接重回Blob类型的公文。那么在此间做一个猜度,能不可能利用此特性,做尤其可信的速度计算呢?我在那里只是提议一种可能性,还未做执行。大家知晓xhr2新增的upload属性可以让我们获取到文件上传的快慢音讯,但对于重临的数量,却无力回天直接提供进程新闻,所以要想依靠它来完毕还得做其它干活。
2 赞 3 收藏
评论
上述办法有时的确很便捷,但大家逐步察觉它在实际上落到实处进度中会费用太多时间。相反,我更爱好使用纯JavaScript来完结图片的预加载。上边将提供三种那样的预加载方法,它们得以很赏心悦目地工作于拥有现代浏览器之上。
JavaScript代码段1
<div class=”hidden”>
<script type=”text/javascript”>
<!–//–><![CDATA[//><!–
var images = new Array()
function preload() {
for (i = 0; i <
preload.arguments.length; i++) {
images[i] = new Image()
images[i].src =
preload.arguments[i] }
}
preload(
“”,
“”,
“”
)
//–><!]]>
</script>
</div>
只需简单编辑、加载所必要图片的门径与名称即可,很不难已毕:
该形式尤其适用预加载大量的图形。我的画廊网站使用该技能,预加载图片数量达50多张。将该脚本利用到登录页面,只要用户输入登录帐号,大部分画廊图片将被预加载。
JavaScript代码段2
<div class=”hidden”>
<script type=”text/javascript”>
<!–//–><![CDATA[//><!–
if (document.images) {
img1 = new Image();
img2 = new Image();
img3 = new Image();
img1.src =
“”;
img2.src =
“”;
img3.src =
“”;
}
//–><!]]>
</script>
</div>
该情势与地点的法门类似,也足以预加载任意数量的图形。将下边的剧本添参与别的Web页中,依照程序指令进行编辑即可。
正如所看见,每加载一个图形都亟待创制一个变量,如“img1 = new
Image();”,及图片源地址注脚,如“img3.src =
“../path/to/image-003.gif”;”。参考该形式,你可根据必要加载任意多的图片。
俺们又对该措施进行了改正。将该脚本封装入一个函数中,并选拔addLoad伊芙nt(),延迟预加载时间,直到页面加载已毕。
function preloader() {
if (document.images) {
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
img1.src = “”;
img2.src = “”;
img3.src = “”;
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != ‘function’) {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);
方法三:使用Ajax完成预加载
地点所付出的措施如同不够酷,那现在来看一个选择Ajax落成图片预加载的艺术。该办法运用DOM,不仅仅预加载图片,还会预加载CSS、JavaScript等连锁的事物。使用Ajax,比一直运用JavaScript,优越之处在于JavaScript和CSS的加载不会影响到方今页面。该方法不难、高效。
window.onload = function() {
setTimeout(function() {
// XHR to request a JS and a CSS
var xhr = new XMLHttpRequest();
xhr.open(‘GET’, ”);
xhr.send(”);
xhr = new XMLHttpRequest();
xhr.open(‘GET’, ”);
xhr.send(”);
// preload image
new Image().src = “”;
}, 1000);
};
地点代码预加载了“preload.js”、“preload.css”和“preload.png”。1000阿秒的晚点是为着避防脚本挂起,而造成健康页面出现效率难点。
下边,大家看看怎么样用JavaScript来促成该加载进程:
window.onload = function() {
setTimeout(function() {
// reference to <head>
var head = document.getElementsByTagName(‘head’)[0];
// a new CSS
var css = document.createElement(‘link’);
css.type = “text/css”;
css.rel = “stylesheet”;
css.href = “”;
// a new JS
var js = document.createElement(“script”);
js.type = “text/javascript”;
js.src = “”;
// preload JS and CSS
head.appendChild(css);
head.appendChild(js);
// preload image
new Image().src = “”;
}, 1000);
};
此地,大家由此DOM创造几个要一向促成八个公文的预加载。正如上面提到的那么,使用Ajax,加载文件不会利用到加载页面上。从那一点上看,Ajax方法优越于JavaScript。