Javascript图片预加载详解,JavaScript及Ajax完毕高效的图片预加载

Javascript图片预加载详解

2016/07/04 · JavaScript
· 1 评论 ·
预加载

初稿出处: Perishable
Press   译文出处:CSDN   

Perishable Press网站近期发布了一篇小说《3 Ways to Preload Images with
CSS, JavaScript, or
Ajax》,分享了使用CSS、JavaScript及Ajax落成图片预加载的三大办法。下面为译文。

预加载图片是抓牢用户体验的一个很好法子。图片预先加载到浏览器中,访问者便可顺遂地在您的网站上冲浪,并享受到极快的加载速度。这对图纸画廊及图片占据很大比例的网站的话万分有益于,它有限支撑了图片很快、无缝地揭示,也可帮助用户在浏览你网站内容时得到更好的用户体验。本文将享受三个不等的预加载技术,来拉长网站的性质与可用性。

主意一:用CSS和JavaScript落成预加载

兑现预加载图片有成百上千方法,包罗运用CSS、JavaScript及相互的各类组合。那么些技巧可根据差距规划场景设计出相应的化解方案,非常火速。

唯有运用CSS,可不难、高效地预加载图片,代码如下:

CSS

#preload-01 { backgroundnull:url()
no-repeat -9999px -9999px; } #preload-02 {
backgroundnull:url(Javascript图片预加载详解,JavaScript及Ajax完毕高效的图片预加载。) no-repeat -9999px
-9999px; } #preload-03 {
backgroundnull:url() no-repeat -9999px
-9999px; }

1
2
3
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }  
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }  
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

将那八个ID接纳器应用到(X)HTML元素中,大家便可通过CSS的background属性将图片预加载到显示屏外的背景上。只要那一个图片的门径保持不变,当它们在Web页面的其他位置被调用时,浏览器就会在渲染进程中运用预加载(缓存)的图形。简单、高效,不需求其余JavaScript。

该措施即便高速,但仍有改进余地。使用该法加载的图形会同页面的其它情节一起加载,增添了页面的总体加载时间。为精通决那么些题材,大家增加了一部分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);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// better image preloading @ <a href="http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/">http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/</a>  
function preloader() {  
    if (document.getElementById) {  
        document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";  
        document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";  
        document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) 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

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

JavaScript

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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(  
                "http://domain.tld/gallery/image-001.jpg",  
                "http://domain.tld/gallery/image-002.jpg",  
                "http://domain.tld/gallery/image-003.jpg"  
            )  
        //–><!]]>  
    </script>  
</div>

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

JavaScript代码段2

该方法与地方的形式类似,也可以预加载任意数量的图片。将上边的脚本添加入其余Web页中,根据程序指令展开编辑即可。

JavaScript

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="hidden">  
    <script type="text/javascript">  
        <!–//–><![CDATA[//><!–  
            if (document.images) {  
                img1 = new Image();  
                img2 = new Image();  
                img3 = new Image();  
                img1.src = "http://domain.tld/path/to/image-001.gif";  
                img2.src = "http://domain.tld/path/to/image-002.gif";  
                img3.src = "http://domain.tld/path/to/image-003.gif";  
            }  
        //–><!]]>  
    </script>  
</div>

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

我们又对该办法开展了查对。将该脚本封装入一个函数中,并选择 addLoad伊芙nt(),延迟预加载时间,直到页面加载已毕。

JavaScript

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);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function preloader() {  
    if (document.images) {  
        var img1 = new Image();  
        var img2 = new Image();  
        var img3 = new Image();  
        img1.src = "http://domain.tld/path/to/image-001.gif";  
        img2.src = "http://domain.tld/path/to/image-002.gif";  
        img3.src = "http://domain.tld/path/to/image-003.gif";  
    }  
}  
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的加载不会影响到近来页面。该办法简单、高效。

JavaScript

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); };

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

地点代码预加载了“preload.js”、“preload.css”和“preload.png”。1000飞秒的超时是为了以免万一脚本挂起,而导致健康页面出现作用难题。

下边,大家看看哪些用JavaScript来兑现该加载进度:

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); };

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
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 = "http://domain.tld/preload.css";  
  
        // a new JS  
        var js  = document.createElement("script");  
        js.type = "text/javascript";  
        js.src  = "http://domain.tld/preload.js";  
  
        // preload JS and CSS  
        head.appendChild(css);  
        head.appendChild(js);  
  
        // preload image  
        new Image().src = "http://domain.tld/preload.png";  
  
    }, 1000);  
  
};

此处,大家通过DOM创造五个元一贯完结两个文件的预加载。正如上边提到的那样,使用Ajax,加载文件不会动用到加载页面上。从那一点上看,Ajax方法优越于JavaScript。

借使您还有啥好的图形预加载方法,及对上述办法的改正指出,欢迎在说东道西中享受。(编译:陈秋歌
审校:夏梦竹)

初稿链接:3 Ways to Preload Images with CSS, JavaScript, or
Ajax

1 赞 9 收藏 1
评论

亚洲必赢官网 1

预加载图片是升高用户体验的一个很好点子。图片预先加载到浏览器中,访问者便可顺遂地在您的网站上冲浪,并分享到极快的加载速度。那对图片画
廊及图片占据很大比例的网站来说更加方便,它有限协助了图片飞速、无缝地发布,也可协理用户在浏览你网站内容时获得更好的用户体验。本文将分享四个例外的预加
载技术,来增长网站的属性与可用性。 

措施一:用CSS和JavaScript已毕预加载

预加载图片是拉长用户体验的一个很好措施。图片预先加载到浏览器中,访问者便可顺遂地在你的网站上冲浪,并分享到极快的加载速度。那对图片画廊及图片占据很大比例的网站的话分外有利,它有限支撑了图片急忙、无缝地发表,也可协理用户在浏览你网站内容时得到更好的用户体验。本文将享用三个不等的预加载技术,来增长网站的属性与可用性。

方法一:用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及二者的各个组合。这个技能可按照分歧规划场景设计出相应的解决方案,至极高速。
单独利用CSS,可简单、高效地预加载图片,代码如下:

措施一:用CSS和JavaScript落成预加载

格局二:仅使用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);

艺术三:使用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。

#preload-01 { backgroundnull:url()
no-repeat -9999px -9999px; }
#preload-02 { backgroundnull:url()
no-repeat -9999px -9999px; }
#preload-03 { backgroundnull:url()
no-repeat -9999px -9999px; }

在该脚本的率先有些,大家获取使用类选取器的元素,并为其设置了background属性,以预加载差异的图片。
该脚本的第二有些,大家运用addLoad伊夫nt()函数来推延preloader()函数的加载时间,直到页面加载已毕。
即使JavaScript不可能在用户的浏览器中健康运转,会生出怎么着?很简短,图片不会被预加载,当页面调用图片时,正常显示即可。

将那多少个ID选拔器应用到(X)HTML元素中,我们便可通过CSS的background属性将图片预加载到显示屏外的背景上。只要那几个图片的路径保持不变,当它们在Web页面的其他地方被调用时,浏览器就会在渲染进度中选用预加载(缓存)的图形。简单、高效,不需求任何JavaScript。
该措施尽管很快,但仍有改革余地。使用该法加载的图纸会同页面的其余内容一起加载,扩展了页面的完全加载时间。为了化解那么些难点,大家增加了部分JavaScript代码,来推迟预加载的岁月,直到页面加载完成。代码如下:

方法二:仅使用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);

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多张。将该脚本利用到登录页面,只要用户输入登录帐号,大部分画廊图片将被预加载。 

在该脚本的第一局地,大家收获使用类选拔器的因素,并为其安装了background属性,以预加载差其他图样。
该脚本的第二局地,大家运用addLoad伊夫nt()函数来延缓preloader()函数的加载时间,直到页面加载完成。
假设JavaScript无法在用户的浏览器中正常运作,会爆发什么样?很粗略,图片不会被预加载,当页面调用图片时,正常突显即可。

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页中,根据程序指令进行编辑即可。

艺术二:仅使用JavaScript达成预加载

正如所看见,每加载一个图形都要求创建一个变量,如“img1 = new
Image();”,及图片源地址表明,如“img3.src =
“../path/to/image-003.gif”;”。参考该格局,你可按照须求加载任意多的图形。

上述办法有时的确很迅猛,但我们逐步察觉它在实际上落到实处进程中会花费太多时间。相反,我更爱好使用纯JavaScript来促成图片的预加载。上面将提供两种这样的预加载方法,它们能够很美丽地工作于拥有现代浏览器之上。

俺们又对该方式开展了校勘。将该脚本封装入一个函数中,并使用
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落成预加载

JavaScript代码段1

上边所提交的情势如同不够酷,那现在来看一个选取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。

复制代码 代码如下:

<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来兑现该加载进程:

亚洲必赢官网,复制代码 代码如下:

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。

完成预加载图片有成百上千艺术,包含使用CSS、JavaScript及两岸的种种组合。这个技巧可依据分歧规划场景设…

网站地图xml地图