先羅列一些預加載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”
看來還有更多的”元素”需要我們去挖掘了 :)