前端资源预加载并出示进程条,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”>   
前端资源预加载并出示进程条,JavaScript及Ajax已毕图片预加载的三大措施。        <!–//–><![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来兑现该加载进程:

复制代码 代码如下:

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地图