預(yù)加載css或javascript的js代碼
更新時(shí)間：2010年04月23日 20:03:30 作者：
為了提高網(wǎng)站的加載速度，有一個(gè)很重要的手段就是在用戶瀏覽過程中的上游網(wǎng)站做一個(gè)文件的預(yù)加載。
預(yù)加載文件一般有兩種常用的方式：xhr和動態(tài)插入節(jié)點(diǎn)的方式。動態(tài)插入節(jié)點(diǎn)是最為簡單也最為廣泛的一種異步加載方式(例如yui的Get模塊)，然后使用動態(tài)插入節(jié)點(diǎn)方法加載的文件都會在加載后立即執(zhí)行，javascript的執(zhí)行一方面會占用瀏覽器js執(zhí)行進(jìn)程，另一方面也可能改變頁面結(jié)構(gòu)，而css的執(zhí)行更有可能讓整個(gè)頁面變化。xhr方式雖然不會執(zhí)行腳本，但是由于同域的限制，且如今網(wǎng)站的靜態(tài)文件都是部署在cdn服務(wù)器上，如何預(yù)加載css js文件也變有點(diǎn)玄妙了。
Stoyan Stefanov 撰文簡明的闡述了一種加載文件而不會讓之執(zhí)行的方法。原文可見 http://www.phpied.com/preload-cssjavascript-without-execution/
具體的方法是，ie中使用 new Image().src 去預(yù)加載文件，而其他瀏覽器使用動態(tài)插入的 <object> 標(biāo)簽來完成加載。
部分代碼如下
window.onload = function () {
var i = 0,
max = 0,
o = null,
// list of stuff to preload
preload = [
'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.png',
'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.js',
'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.css'
],
isIE = navigator.appName.indexOf('Microsoft') === 0;
for (i = 0, max = preload.length; i < max; i += 1) {
if (isIE) {
new Image().src = preload[i];
continue;
}
o = document.createElement('object');
o.data = preload[i];
// IE stuff, otherwise 0x0 is OK
//o.width = 1;
//o.height = 1;
//o.style.visibility = "hidden";
//o.type = "text/plain"; // IE
o.width = 0;
o.height = 0;
// only FF appends to the head
// all others require body
document.body.appendChild(o);
}
};
demo 可見 http://phpied.com/files/object-prefetch/page1.php?id=1
幾點(diǎn)說明：
1. new Image().src 之所以不能在ff中使用是因?yàn)閒f對圖片實(shí)現(xiàn)了一套單獨(dú)的緩存。 同時(shí)safari和chrome看起來也沒有被緩存。
2. 動態(tài)插入的 object 標(biāo)簽需要插入到非 head部分，以觸發(fā)加載。
3. ie7 ie8 也可以通過一些代碼使用動態(tài)object加載文件（代碼注釋中有提到）。但是作者發(fā)現(xiàn)object 通常會消耗很大， so...
通過自身的實(shí)驗(yàn)發(fā)現(xiàn)相當(dāng)不錯(cuò)的，有需求的同學(xué)不妨一試。
Stoyan Stefanov 撰文簡明的闡述了一種加載文件而不會讓之執(zhí)行的方法。原文可見 http://www.phpied.com/preload-cssjavascript-without-execution/
具體的方法是，ie中使用 new Image().src 去預(yù)加載文件，而其他瀏覽器使用動態(tài)插入的 <object> 標(biāo)簽來完成加載。
部分代碼如下
復(fù)制代碼 代碼如下:
window.onload = function () {
var i = 0,
max = 0,
o = null,
// list of stuff to preload
preload = [
'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.png',
'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.js',
'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.css'
],
isIE = navigator.appName.indexOf('Microsoft') === 0;
for (i = 0, max = preload.length; i < max; i += 1) {
if (isIE) {
new Image().src = preload[i];
continue;
}
o = document.createElement('object');
o.data = preload[i];
// IE stuff, otherwise 0x0 is OK
//o.width = 1;
//o.height = 1;
//o.style.visibility = "hidden";
//o.type = "text/plain"; // IE
o.width = 0;
o.height = 0;
// only FF appends to the head
// all others require body
document.body.appendChild(o);
}
};
demo 可見 http://phpied.com/files/object-prefetch/page1.php?id=1
幾點(diǎn)說明：
1. new Image().src 之所以不能在ff中使用是因?yàn)閒f對圖片實(shí)現(xiàn)了一套單獨(dú)的緩存。 同時(shí)safari和chrome看起來也沒有被緩存。
2. 動態(tài)插入的 object 標(biāo)簽需要插入到非 head部分，以觸發(fā)加載。
3. ie7 ie8 也可以通過一些代碼使用動態(tài)object加載文件（代碼注釋中有提到）。但是作者發(fā)現(xiàn)object 通常會消耗很大， so...
通過自身的實(shí)驗(yàn)發(fā)現(xiàn)相當(dāng)不錯(cuò)的，有需求的同學(xué)不妨一試。
您可能感興趣的文章:
- 用JavaScript獲取網(wǎng)頁中的js、css、Flash等文件
- [HTML/CSS/Javascript]WWTJS
- Javascript load Page,load css,load js實(shí)現(xiàn)代碼
- javascript預(yù)加載圖片、css、js的方法示例介紹
- javascript實(shí)現(xiàn)動態(tài)導(dǎo)入js與css等靜態(tài)資源文件的方法
- 使用javaScript動態(tài)加載Js文件和Css文件
- 使用jquery動態(tài)加載Js文件和Css文件
- 如何實(shí)現(xiàn)JavaScript動態(tài)加載CSS和JS文件
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了如何簡單實(shí)現(xiàn)js進(jìn)度條加載效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
所謂的提升用戶體驗(yàn),其實(shí)就是把所有用戶視為懶鬼,比如JavaScript自動完成(Autocomplete)腳本, 常用于表單,用戶只需輸入一兩個(gè)字母,就為你擴(kuò)展、聯(lián)想、匹配和供君選擇,2009-10-10
在ES6中，引入了同步iteration的概念，隨著ES8中的Async操作符的引用，是不是可以在一異步操作中進(jìn)行遍歷操作呢？今天要給大家講一講ES9中的異步遍歷的新特性Async iteration。2021-06-06
這篇文章主要給大家介紹了關(guān)于微信小程序登錄的那些事，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
通過 window.opener 實(shí)現(xiàn)。關(guān)于這個(gè)對象的用法請查閱相關(guān)資料。2008-11-11
繼承是面向?qū)ο缶幊讨杏忠环浅Ｖ匾母拍睿琂avaScript支持實(shí)現(xiàn)繼承，不支持接口繼承，實(shí)現(xiàn)繼承主要依靠原型鏈來實(shí)現(xiàn)的2017-06-06
使用js實(shí)現(xiàn)單鏈解決前端隊(duì)列問題的方法
這篇文章主要介紹了使用js實(shí)現(xiàn)單鏈解決前端隊(duì)列問題的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
正因?yàn)镴avaScript本身沒有完整的類和繼承的實(shí)現(xiàn)，并且我們也看到通過手工實(shí)現(xiàn)的方式存在很多問題， 因此對于這個(gè)富有挑戰(zhàn)性的任務(wù)網(wǎng)上已經(jīng)有很多實(shí)現(xiàn)了2009-07-07
JavaScript在IE和Firefox瀏覽器下的7個(gè)差異兼容寫法小結(jié)
盡管那需要用長串的、沉悶的不同分支代碼來應(yīng)付不同瀏覽器的日子已經(jīng)過去，偶爾還是有必要做一些簡單的區(qū)分和目標(biāo)檢測來確保某塊代碼能在用戶的機(jī)器上正常運(yùn)行。2010-06-06
JavaScript:void(0)用法及一些常見問題解決辦法
這篇文章主要介紹了javascript:void(0)在JavaScript中的用法,探討了其防止鏈接默認(rèn)行為的作用,提供了使用示例,并針對常見問題如與#的區(qū)別、事件綁定和鍵盤訪問進(jìn)行了講解,需要的朋友可以參考下2024-12-12