云顶娱乐集团

当前位置:云顶娱乐集团 > 云顶娱乐集团 > Javascript图片预加载精解,前端财富预加载并呈现

Javascript图片预加载精解,前端财富预加载并呈现

来源:http://www.clubskodakaroq.com 作者:云顶娱乐集团 时间:2019-11-02 06:55

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属性,以预加载不一样的图纸。

该脚本的第二有个别,大家采纳addLoadEvent()函数来推迟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

前面几脾质量优化 – 能源预加载

2015/11/19 · JavaScript · 预加载

原稿出处: ROBIN RENDLE   译文出处:bubkoo的博客(@问崖的崖)   

Javascript图片预加载精解,前端财富预加载并呈现进程条。当提到前端质量优化时,我们第一会联想到文件的联结、压缩,文件缓存和开启服务器端的 gzip 压缩等,那使得页面加载越来越快,客商能够火速接收大家的 Web 应用来完结他们的对象。 

财富预加载是另贰性格能优化技巧,大家能够利用该才具来预先告知浏览器有个别能源恐怕在后天会被运用到。

引用 Patrick Hamann 的解释:

预加载是浏览器对以后或然被选拔能源的大器晚成种暗中提示,一些能源得以在现阶段页面使用到,一些也许在现在的少数页面中被选拔。作为开采职员,大家比浏览器越发精通我们的利用,所以大家可以对大家的主旨能源接受该技巧。

这种做法早已被叫作 prebrowsing,但那而不是生机勃勃项单生龙活虎的技术,可以细分为多少个例外的技术:DNS-prefetchsubresource 和专门的学业的 prefetchpreconnectprerender

 

前面二个能源预加载并显示进度条

2015/09/30 · JavaScript · 预加载

原来的书文出处: 吕大豹   

大家平时拜候到,一些站点在第三遍跻身的时候会先出示二个进程条,等能源加载完毕后再突显页面,大致像那样:

云顶娱乐网站 2

接下来全部页面包车型客车操作就能特别流畅,因为以往没必要再伺机加载财富了。越发是在移动端,或许是页游中,那样做能防止页面现身白屏(等待加载图片),异常的大程度进步客商体验。这这种本领是何等兑现的吗?其实极度简单,本文就来从基础细节探讨风流倜傥番。

GCanvas 渲染引擎介绍

2017/07/31 · HTML5 · Canvas

原稿出处: Taobao前端共青团和少先队(FED)- 韦青   

云顶娱乐网站 3

GCanvas 提供了后生可畏套相符于 H5 Canvas 规范的 JavaScript API。基于那套 API 能够低价的去做图形绘制、动画渲染等,开垦的体会与 H5 Canvas 是一丝一毫平等的。

CSS direction属性简要介绍与实际使用

2016/03/21 · CSS · 1 评论 · direction

初藳出处: 张鑫旭   

DNS 预解析 DNS-Prefetch

通过 DNS 预分析来报告浏览器今后我们恐怕从某些特定的 U卡宴L 获取能源,当浏览器真正使用到该域中的有个别能源时就足以尽早地形成 DNS 解析。举例,我们现在恐怕从 example.com 获取图片或音频能源,那么可以在文书档案最上端的 `` 标签中投入以下内容:

<link rel="dns-prefetch" href="//example.com">

1
<link rel="dns-prefetch" href="//example.com">

当大家从该 UCRUISERL 央浼七个能源时,就不再须求等待 DNS 的深入分析进度。该本领对接纳第三方能源特别有用。

在 Harry Roberts 的文章中提到:

经过简单的意气风发行代码就能够告知那个包容的浏览器实行 DNS 预深入分析,那意味当浏览器真正诉求该域中的有个别财富时,DNS 的深入分析就早就完成了。

那不啻是叁个老大渺小的性质优化,显得也而不是那么重大,但实际并非那样 – Chrome 一直都做了就像的优化。当在浏览器的地址栏中输入 U昂CoraL 的一小段时,Chrome 就自行落成了 DNS 预深入分析(以致页面预渲染),从而为各类乞求节省了举足轻重的年华。

为什么须求财富预加载

好多时候,大家的页面并不是二遍渲染实现的,而是随着顾客的操作,不断改正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只带央求头音讯,不传输能源)。那样使用一张图片的岁月会大大压缩,我们的页面看起来会要命流利,阿娘再也不用顾虑客户会跳走了~

也正是说,预加载的财富大家并无需手动保存,由浏览器自动放到缓存了。

GCanvas 介绍

GCanvas发展经验了三个级次。

  • 率先品级,二〇一四 年中到 二〇一六 年初,解决 Android 平台 WebView Canvas 渲染质量差的主题素材。
  • 第二品级,二〇一四 年 11 月到明日,为前端提供 Native 图形绘制技艺。

用一句话来总结 GCanvas,即依据 W3C 规范,移动端的跨平台的高品质图形渲染引擎。能够从多个方面来疏解。

  • 遵循 W3C 标准
    GCanvas 提供了风流浪漫套相像于 H5 Canvas 标准的 JavaScript API,开辟职员基于那套 API 能够渔人之利的去做图形绘制、动画渲染等。开采的体验与 H5 Canvas 是截然黄金年代致的。
  • 跨平台
    GCanvas 的基本基于 OpenGL ES, 用 C++ 达成了少年老成套用于描述 Canvas 标准API 的接口达成。我们将其称为渲染引擎内核。并透过交叉编译,使得能够适配 Android、iOS 这两大主流移动平台,由此具备跨平台的特征。
  • 高性能
    最早移动平台上 H5 Canvas 去做一些繁缛的动画或娱乐,在 WebView 上的心得十三分数差。 首要缘由是 WebView 对 GPU 硬件加快的支撑差。高品质则是丰硕利用了 GPU 硬件的渲染技能,首要呈现多个方面:
    • 对此 Android 3.0 之前的系统,Android 的渲染管线是不扶持硬件加快的,WebView 中的 Canvas 不可能获得 GPU 的图纸渲染本事的帮衬。对于那类系统,通过 GCanvas 可以获取更底层的 OpenGL ES 的硬件加速技术巩固渲染效用。
    • 链路上来看,减弱了调用路线,升高了渲染质量。使用了 GCanvas 则没有必要经过 WebView 内部的千头万绪逻辑管理和图层树渲染,而是让 JavaScript 通过桥接情势直接调用渲染引擎内核(OpenGL ES)。

风流浪漫、用的少并不表示未有用

足足,在自家接触的如此多类型里,未有见到使用过CSS direction属性抓牢在开垦的。

为啥吧?是因为direction长得丑吗?

虽然说direction当真面目可憎,不过CSS并不是八个看脸卖萌的社会风气。

那是因为包容性吗?

那更不是了,在特别“美眉”确实是美眉的时期,包蕴IE6在内的浏览器,CSS direction就早就被帮忙。

Chrome Safari Firefox Opera IE Android iOS
2.0+ 1.3+ Any 9.2+ 5.5+ Any 3.1+

那到底是如何原因呢?

由来就在于笔者这篇作品写得太晚了!

CSS direction天性轻松好记,属性值少,宽容性好,关键时候方便省时,是时候给咱们宣传宣传,不要埋没了人家的新鲜技能。

本文由云顶娱乐集团发布于云顶娱乐集团,转载请注明出处:Javascript图片预加载精解,前端财富预加载并呈现

关键词: