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() 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、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. Javascript图片预加载详解,JavaScript及Ajax已毕长足的图纸预加载。        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及两岸的各类组合。那几个技能可依照不一致规划场景设计出相应的解决方案,非常高效。
独自利用CSS,可简单、高效地预加载图片,代码如下:

措施二:仅使用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);   

复制代码 代码如下:

复制代码 代码如下:

方式三:使用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; }

#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代码,来推迟预加载的光阴,直到页面加载完结。代码如下:

将那五个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);

// 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无法在用户的浏览器中健康运转,会发出哪些?很简短,图片不会被预加载,当页面调用图片时,正常显示即可。

在该脚本的第一有的,我们赢得使用类接纳器的因素,并为其安装了background属性,以预加载不一致的图形。
该脚本的第二有些,我们利用addLoad伊夫nt()函数来延缓preloader()函数的加载时间,直到页面加载达成。
如若JavaScript不可以在用户的浏览器中健康运行,会发出什么?很简短,图片不会被预加载,当页面调用图片时,正常突显即可。

格局二:仅使用JavaScript落成预加载

办法二:仅使用JavaScript完毕预加载

上述模式有时真的很高效,但大家渐渐察觉它在其实贯彻进程中会开支太多日子。相反,我更欣赏使用纯JavaScript来落成图片的预加载。下边将提供三种那样的预加载方法,它们得以很雅观地工作于所有现代浏览器之上。

上述方法有时实在很迅猛,但大家渐渐发现它在骨子里贯彻进度中会用度太多日子。相反,我更欣赏使用纯JavaScript来促成图片的预加载。下边将提供两种那样的预加载方法,它们得以很赏心悦目地劳作于所有现代浏览器之上。

JavaScript代码段1

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>

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

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

JavaScript代码段2

JavaScript代码段2

该格局与地点的主意类似,也足以预加载任意数量的图形。将上面的台本添参预其它Web页中,按照程序指令进行编辑即可。

该办法与地点的不二法门类似,也足以预加载任意数量的图片。将上边的本子添参与此外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>

<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(),延迟预加载时间,直到页面加载落成。

正如所看见,每加载一个图纸都急需成立一个变量,如“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);

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完毕预加载

地方所付出的方法如同不够酷,那现在来看一个使用Ajax完毕图片预加载的办法。该办法运用DOM,不仅仅预加载图片,还会预加载CSS、JavaScript等连锁的事物。使用Ajax,比一向运用JavaScript,优越之处在于JavaScript和CSS的加载不会影响到近年来页面。该办法简单、高效。

上边所提交的法子似乎不够酷,那现在来看一个选拔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);
};

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来落实该加载进程:

上边代码预加载了“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);
};

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创立四个元平素贯彻多个文件的预加载。正如下面提到的那么,使用Ajax,加载文件不会选择到加载页面上。从那点上看,Ajax方法优越于JavaScript。

完成预加载图片有众多方法,包罗选拔CSS、JavaScript及彼此的各个组合。那个技能可依照分化规划场景设…

你或许感兴趣的稿子:

  • JS落成图片预加载无需等待
  • javascript
    事件加载与预加载
  • js 落成图片预加载(js操作 Image对象属性complete ,事件onload
    异步加载图片)
  • javascript预加载图片、css、js的不二法门言传身教介绍
  • js中Image对象以及对其预加载处理示例
  • 浅析js预加载/延迟加载
  • 纯JS图片批量预加载技术代码
  • js
    利用image对象已毕图片的预加载提升访问速度
  • javascript
    也来娱乐图片预加载
  • JS图片预加载插件详解

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图