澳门太阳集团城网址   译文出处

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”。一千皮秒的逾期是为了避防万一脚本挂起,而致使健康页面出现功用难题。

上边,大家看看怎么样用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

You may also like...

发表评论

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

网站地图xml地图