用CSS和JavaScript实现预加载,图片预先加载到浏览

作者: 前端  发布:2019-11-05

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页面包车型客车另内地点被调用时,浏览器就能够在渲染进度中应用预加载(缓存卡塔 尔(英语:State of Qatar)的图样。简单、高效,无需别的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”;”。仿照效法该形式,你可依赖须求加载大肆多的图形。

咱俩又对该方法实行了改进。将该脚本封装入三个函数中,并应用 addLoadEvent(卡塔 尔(阿拉伯语:قطر‎,延迟预加载时间,直到页面加载实现。

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,可轻松、高效地预加载图片,代码如下:

艺术二:仅使用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”;”。参照他事他说加以考查该方式,你可依靠必要加载猖狂多的图形。

大家又对该方法开展了纠正。将该脚本封装入多少个函数中,并动用 addLoadEvent(),延迟预加载时间,直到页面加载完成。

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

将那多个ID接收器应用到(X)HTML成分中,大家便可由此CSS的background属性将图片预加载到显示器外的背景上。只要这个图片的路径保持不改变,当它们在Web页面包车型客车别的地点被调用时,浏览器就能够在渲染过程中选取预加载(缓存卡塔 尔(英语:State of Qatar)的图纸。轻松、高效,没有必要别的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属性,以预加载差别的图形。
该脚本的第二部分,大家采取addLoadEvent()函数来拖延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来得以达成该加载进度:

复制代码 代码如下:

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及二者的各类组合。那么些本领可依附差异规划场景设...

本文由9159.com发布于前端,转载请注明出处:用CSS和JavaScript实现预加载,图片预先加载到浏览

关键词: