預載入JavaScript/CSS但不執行

先羅列一些預載入JavaScript和CSS的方法(歡迎補充)：

1、動態建立節點

2、使用ajax請求

3、使用iframe

4、借用flash去請求資源

5、new Image().src = ‘xxx’;

 

好吧，一個方案一個方案來分析一下（要求是不允許執行Javascript和應用CSS，以免消耗系統資源）：

 

1、支援跨域，但請求後指令碼會執行、樣式會進行渲染，不符合要求 <排除掉>

2、不支援跨域，在靜態資源部署在CDN上時有些麻煩 <排除掉>

3、這個要載入iframe就比較浪費了，資源下載了也會執行或應用，而且不太好共用(資源還得在頁面寫死了，需要預載入不同的資源還得來幾個頁面或是使用引數的形式，太不靈活了) <排除掉>

4、這個瀏覽器得先支援swf，然後還要考慮放檔案根目錄下放crossdomain.xml檔案，還得與JS進行相互的呼叫(也可能不調，初始化的時候把要請求的資源作為引數傳進去)。

可是可以，感覺有點麻煩，而且得花精力另寫flash，而且還得維護它 <排除掉>

 

好吧，就只剩下最後一種了，光IE行，其它不行，怎麼辦？

本文的原文是有出處的，可以點選這裡檢視：www.phpied.com/preload-cssjavascript-without-execution/

 

在非IE中發現動態建立object元素然後附加到body上可以達到與IE中使用new Image()的效果<終於有了一根救命的稻草了>

 

直接上程式碼了：

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

};

 

這個例子的測試頁面，可以點選這裡檢視：http://phpied.com/files/object-prefetch/page1.php?id=1

 

 

要檢視new Image().src為何不能在FF達到預期的效果，可以查原文的”Comments”

 

 

看來還有更多的”元素”需要我們去挖掘了 ?