前端资源预加载并突显进程条
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。