【金沙澳门官网】贯彻图片预加载的三大办法及优缺点分析,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>
【金沙澳门官网】贯彻图片预加载的三大办法及优缺点分析,JavaScript及Ajax完结图片预加载的三大措施。</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地图