预读内容对于部分网速慢，或者加载内容过多的页面，是非常有效的提高友好程度的方法。防止出现由于样式表，和关键图片加载滞后，导致的页面布局错乱，以及关键图片不能马上展示。
也可以防止由于页面信息加载不全，导致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)
