JavaScript及Ajax落成图片预加载的三大形式,前端资源预加载并显示进程条

前端资源预加载并突显进程条

2015/09/30 · JavaScript
· 预加载

原稿出处:
吕大豹   

咱俩平日会看出,一些站点在第一次进入的时候会先出示一个进程条,等资源加载完成后再显示页面,大约像那样:

亚洲必赢官网 1

下一场馆有页面的操作就会极度流畅,因为将来没要求再等待加载资源了。越发是在移动端,或者是页游中,那样做能幸免页面出现白屏(等待加载图片),很大程度升高用户体验。那那种技术是什么贯彻的呢?其实卓殊简单,本文就来从基础细节探讨一番。

预加载图片是拉长用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺遂地在你的网站上冲浪,并分享到极快的加载速度。那对图片画
廊及图片占据很大比重的网站的话极度方便,它保障了图片很快、无缝地发表,也可帮助用户在浏览你网站内容时收获更好的用户体验。本文将享用多少个不等的预加
载技术,来增加网站的属性与可用性。 

预加载图片是增强用户体验的一个很好办法。图片预先加载到浏览器中,访问者便可顺利地在您的网站上冲浪,并享受到极快的加载速度。这对图纸画廊及图片占据很大比重的网站的话分外有益,它保险了图片快捷、无缝地公布,也可扶助用户在浏览你网站内容时得到更好的用户体验。本文将分享七个例外的预加载技术,来增强网站的性质与可用性。

心想事成图片预加载的三大方法及优缺点分析,三大优缺点

预加载图片是增高用户体验的一个很好点子。图片预先加载到浏览器中,访问者便可顺遂地在您的网站上冲浪,并分享到极快的加载速度。那对图片画廊及图片占据很大比例的网站来说尤其有益于,它保险了图片疾速、无缝地发表,也可协助用户在浏览你网站内容时得到更好的用户体验。本文将分享八个差距的预加载技术,来夯实网站的特性与可用性。

艺术一:用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代码  

  1. #preload-01 { background: url() no-repeat -9999px -9999px; }  
  2. #preload-02 { background: url() no-repeat -9999px -9999px; }  
  3. #preload-03 { background: url() no-repeat -9999px -9999px; }
      

将那五个ID选用器应用到(X)HTML元素中,我们便可透过CSS的background属性将图纸预加载到屏幕外的背景上。只要这个图片的路径
保持不变,当它们在Web页面的其他地点被调用时,浏览器就会在渲染进程中应用预加载(缓存)的图片。简单、高效,不须求任何JavaScript。 

该方法就算很快,但仍有改良余地。使用该法加载的图片会同页面的其余内容一起加载,扩大了页面的完好加载时间。为了缓解那几个问题,大家增加了有的JavaScript代码,来推迟预加载的年华,直到页面加载已毕。代码如下:

Js代码  

  1. // better image preloading  
  2. function preloader() {  
  3.     if (document.getElementById) {  
  4.         document.getElementById(“preload-01”).style.background = “url() no-repeat -9999px -9999px”;  
  5.         document.getElementById(“preload-02”).style.background = “url() no-repeat -9999px -9999px”;  
  6.         document.getElementById(“preload-03”).style.background = “url() no-repeat -9999px -9999px”;  
  7.     }  
  8. }  
  9. function addLoadEvent(func) {  
  10.     var oldonload = window.onload;  
  11.     if (typeof window.onload != ‘function’) {  
  12.         window.onload = func;  
  13.     } else {  
  14.         window.onload = function() {  
  15.             if (oldonload) {  
  16.                 oldonload();  
  17.             }  
  18.             func();  
  19.         }  
  20.     }  
  21. }  
  22. addLoadEvent(preloader);  

在该脚本的第一有的,大家获得使用类拔取器的因素,并为其设置了background属性,以预加载差别的图形。

该脚本的第二有的,我们利用addLoad伊芙nt()函数来延缓preloader()函数的加载时间,直到页面加载达成。

假定JavaScript不能在用户的浏览器中健康运行,会生出什么?很粗略,图片不会被预加载,当页面调用图片时,正常显示即可。 

方法一:用CSS和JavaScript落成预加载

资源预加载的场景

哪些的连串须要预加载资源呢?

范围应该锁定单页面应用,SPA的视图一般都是一步一步来突显的,种种资源通过异步请求来获得,为了追求原生app般的流畅体验,可以把一部分资源预加载下来。当然对于有些作业有关的图纸资源,也可考虑延迟加载,但延迟加载不是本文商讨的框框。

视图/图片较多的专题页面,或者是亟需逐帧图片来形成的动画效果,最好都要做预加载。

HTML5嬉戏,图片一般都相比多,而且许多逐帧动画,必必要预加载,事实上部分游玩引擎都会提供相应成效。

哪些资源须求预加载呢?

web中带有的资源有许各种,图片、音视频之类的媒体文件,其它就是js、css文件,那一个都亟待发送请求来赢得。那那些资源难道我们都预加载?

当然不是了,预加载也是亟需消耗时间的,总无法让用户等你加载个几十分钟吧。具体预加载哪些资源,须要基于实际的设想,也跟你的类型有关。以下是有些本人的想法:

js、css文件不需进行预加载。现在写js基本都用requirejs之类的加载器,而且最后都会展开削减合并,将请求数降到最低,最后唯有一个文件,有些团队依旧还将削减后的代码直接放在行内,这样一个结余的乞请都未曾了。

那么须要预加载的就是媒体文件了,图片、音视频之类。那类资源也得依据实际意况来抉择如何需求预加载。比如多数页面装饰性图片就须要预加载,而由工作动态获取的图形则无从预加载(预先不掌握地点)。用作音效、小动画的音摄像可以预加载,一个半小时长的摄像就不可能预加载了。

主意二:仅使用JavaScript达成预加载

上述措施有时实在很高效,但大家稳步发现它在实际上贯彻进程中会开销太多时光。相反,我更欣赏使用纯JavaScript来落到实处图片的预加载。下边将提供二种那样的预加载方法,它们得以很美丽地干活于具有现代浏览器之上。 

JavaScript代码段1

只需简单编辑、加载所急需图片的门道与名称即可,很简单完结:

Html代码  

  1. <div>  
  2.     <script type=”text/javascript”>  
  3.         <!–//–><![CDATA[//><!– 
  4.         var images = new Array() 
  5.             function preload() { 
  6.                 for (i = 0; i < preload.arguments.length; i++) { 
  7.                     images[i] = new Image() 
  8.                     images[i].src = preload.arguments[i] 
  9.                 } 
  10.             } 
  11.             preload( 
  12.                 “”, 
  13.                 “”, 
  14.                 “” 
  15.             ) 
  16.         //–><!]]>  
  17.      </script>  
  18. </div>  

该方法尤其适用预加载多量的图样。我的画廊网站使用该技术,预加载图片数量达50多张。将该脚本利用到登录页面,只要用户输入登录帐号,半数以上画廊图片将被预加载。 

JavaScript代码段2

该方法与地方的法子类似,也足以预加载任意数量的图片。将上边的脚本添加入此外web页中,根据程序指令举办编辑即可。

Html代码  

  1. <div>  
  2.     <script type=”text/javascript”>  
  3.         <!–//–><![CDATA[//><!–  
  4.         if (document.images) { 
  5.                 img1 = new Image(); 
  6.                 img2 = new Image(); 
  7.                 img3 = new Image(); 
  8.                 img1.src = “”; 
  9.                 img2.src = “”; 
  10.                 img3.src = “”; 
  11.             } 
  12.         //–><!]]>  
  13.     </script>  
  14. </div>  

 

正如所看见,每加载一个图片都亟需创制一个变量,如“img1 = new
Image();”,及图片源地址声明,如“img3.src
=“../path/to/image-003.gif”;”。参考该形式,你可依照必要加载任意多的图样。

大家又对该办法开展了改良。将该脚本封装入一个函数中,并拔取addLoad伊夫nt(),延迟预加载时间,直到页面加载达成。

Js代码  

  1. function preloader() {  
  2.     if (document.images) {  
  3.         var img1 = new Image();  
  4.         var img2 = new Image();  
  5.         var img3 = new Image();  
  6.         img1.src = “”;  
  7.         img2.src = “”;  
  8.         img3.src = “”;  
  9.     }  
  10. }  
  11. function addLoadEvent(func) {  
  12.     var oldonload = window.onload;  
  13.     if (typeof window.onload != ‘function’) {  
  14.         window.onload = func;  
  15.     } else {  
  16.         window.onload = function() {  
  17.             if (oldonload) {  
  18.                 oldonload();  
  19.             }  
  20.             func();  
  21.         }  
  22.     }  
  23. }  
  24. 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代码  

  1. window.onload = function() {  
  2.     setTimeout(function() {  
  3.         // XHR to request a JS and a CSS  
  4.         var xhr = new XMLHttpRequest();  
  5.         xhr.open(‘GET’, ”);  
  6.         xhr.send(”);  
  7.         xhr = new XMLHttpRequest();  
  8.         xhr.open(‘GET’, ”);  
  9.         xhr.send(”);  
  10.         // preload image  
  11.         new Image().src = “”;  
  12.     }, 1000);  
  13. };   

地点代码预加载了“preload.js”、“preload.css”和“preload.png”。1000飞秒的晚点是为着防备脚本挂起,而造成健康页面出现功用难点。 

上面,大家看看哪些用JavaScript来落到实处该加载进度:

Js代码  

  1. window.onload = function() {  
  2.     setTimeout(function() {  
  3.         // reference to <head>  
  4.         var head = document.getElementsByTagName(‘head’)[0];  
  5.         // a new CSS  
  6.         var css = document.createElement(‘link’);  
  7.         css.type = “text/css”;  
  8.         css.rel  = “stylesheet”;  
  9.         css.href = “”;  
  10.         // a new JS  
  11.         var js  = document.createElement(“script”);  
  12.         js.type = “text/javascript”;  
  13.         js.src  = “”;  
  14.         // preload JS and CSS  
  15.         head.appendChild(css);  
  16.         head.appendChild(js);  
  17.         // preload image  
  18.         new Image().src = “”;  
  19.     }, 1000);  
  20. };   

此地,大家因而DOM创造七个因向来落到实处多个文件的预加载。正如上面提到的那么,使用Ajax,加载文件不会使用到加载页面上。从那一点上看,Ajax方法优越于JavaScript。

在该脚本的率先部分,我们获得使用类选取器的元素,并为其安装了background属性,以预加载差别的图样。
该脚本的第二有些,大家应用addLoad伊夫nt()函数来推延preloader()函数的加载时间,直到页面加载完结。
若是JavaScript不能在用户的浏览器中正常运转,会发出什么样?很简短,图片不会被预加载,当页面调用图片时,正常突显即可。

资源预加载小插件:resLoader.js介绍

正文的根本终于来了。。。额

据悉地方的规律,我写了一个插件,用来做资源预加载。

拥有的性状如下:

  1. 自定义资源列表,用于预加载

  2. 自定义onProgress,想展现成进程条如故百分比数字或者个性的设计都可

  3. 发轫和终止可配置回调函数

  4. 只扶助图片的预加载

  5. 辅助amd、cmd加载器加载,同时辅助直接用<script>标签引入使用

  6. 不依靠其余库

用法如下:

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 收藏
评论

亚洲必赢官网 2

上述办法有时的确很便捷,但大家逐步察觉它在实际上落到实处进度中会费用太多时间。相反,我更爱好使用纯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。

网站地图xml地图