預讀內容對於部分網速慢，或者加載內容過多的頁面，是非常有效的提高友好程度的方法。防止出現由於樣式表，和關鍵圖片加載滯後，導致的頁面佈局錯亂，以及關鍵圖片不能馬上展示。
也可以防止由於頁面信息加載不全，導致js出錯。
經過一番嘗試，此方法可以兼容IE及其他瀏覽器。
- 在IE下
用 new Image().src的形式進行加載 - 在其他的瀏覽器中 用a
動態<object>標籤
源碼以及DEMO
Demo 下載地址：http://download.csdn.net/source/2327166
這裏是最終的實現.
在這個例子裏面，預先加載下一個頁面所需要的關鍵內容. 內容是一個CSS, 一個 JS 和一個 PNG .
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 ) ;
}
} ;
A demo is here:
http://phpied.com/files/object-prefetch/page1.php?id=1
在這個測試例子中，一秒鐘後，在第一頁加載第二頁所需的內容，css，js以及一個png圖片. 可以隨意增加修改ID 進行新的沒有緩存的測試.
在以下瀏覽器中進行過測試 FF3.6, O10, Safari 4, Chrome 5, IE 6,7,8.
Comments
new Image().src不能在FF中起作用，因爲FF中將對圖片進行拆分的緩存. Didn't seem to work in Safari either where CSS and JS were requested on the second page where they sould've been cached- the dynamic
objectelement has to be outside theheadin most browsers in order to fire off the downloads - dynamic
objectworks also in IE7,8 with a few tweaks (commented out in the code above) but not in IE6. In a separate tests I've also found the object element to be expensive in IE in general.
That's about it. Below are some unsuccessful attempts I tried which failed for various reasons in different browsers.
Other unsuccessful attempts
1.
I was actually inspired by
this post by Ben Cherry
where he loads CSS and JS in a print stylesheet. Clever hack, unfortunately didn't work in Chrome which caches the JS but doesn't execute it on the next page.
2.
One of the comments on Ben's post suggested (Philip
and
Dejan
said the same) using invalid
type
attribute to prevent execution, e.g.
text/cache
.
var s = document . createElement ( ' script ' ) ;
s . src = preload [ 1 ] ;
s . type = " text/cache " ;
document . getElementsByTagName ( ' head ' ) [ 0 ] . appendChild ( s ) ;
That worked for the most parts but not in FF3.6 where the JavaScript was never requested.
3.
A dynamic link
prefetch
didn't do anything, not even in FF which is probably the only browser that supports this.
for ( i = 0 , max = preload . length ; i < max ; i += 1 ) {
var link = document . createElement ( ' link ' ) ;
link . href = preload [ i ] ;
link . rel = " prefetch " ;
document . getElementsByTagName ( ' head ' ) [ 0 ] . appendChild ( link ) ;
}
Then it took a bit of trial/error to make IE7,8 work with an object tag, before I stumbled into IE6 and gave up in favor of image src.
In conclusion
I believe this is a solution I could be comfortable with, although it involves user agent sniffing. It certainly looks less hacky than loading JS as CSS anyways. And object elements are meant to load any type of component so no semantic conflict here I don't believe. Feel free to test and report any edge cases or browser/OS combos. (JS errors in IE on the second page are ok, because I'm using
console.log
in the preloaded javascript)
