需要说明的是：当打开a.html后，再刷新页面后，iframe内加载文件的情况。
FF，返回200(注意，这个200不是服务器返回的200，是请求缓存成功。因为发送请求的时间显示的是0)。
CM，显示状态是(from cache).
OP，虽然显示状态是n/a，但是也是from cache。 IE，IE自带的调试工具显示304，HttpWatch显示from cache。
测试环境：
WIN7 EN SP1：OP 11.50、IE7-9、FF 3.6/6.0、Chrome 10
XP EN SP3：IE6
XP EN SP3：IE7
XP CN SP3：IE8
工具：IE9自带的调试工具、HttpWatch、firebug、chrome自带的调试工具、Opera Dragonfly。
最后得出的结论：js预加载图片使用new Image()基本够用了。但是css、js特殊一些，使用object需要判断浏览器。如果考虑到js、css、img都能兼容实现预加载，可以考虑使用iframe。
另外，上面的方法创建iframe后，不使用write()写入要加载的文件，直接设置iframe.src = "cache.html"，然后把要预加载的文件写在cache.html内也是可行的（以前看过有文章介绍新浪微博是这样做的，但是文章地址找不到了，搜索也没搜到），cache的网址我收藏了：，但是看微博的首页没找到这个，不知道在哪个页使用的。
其他预加载的一点补充
doc.createElement('script') 可以预加载js，如果js里面有对页面的操作，就会对页面产生影响。
doc.createElement('link') 可以预加载css，但是对当前页面的样式也可能会有影响。
所以这样预加载不太可取。
用ajax加载img/js/css，兼容性不错，文件可以被缓存，但是只能限制同域，所以使用范围有限。
预加载图片还可以利用CSS的背景图片实现。牛人lifesinger之前写过关于图片的HTTP请求的文章，不过他博客以前的数据没了。网上搜索到一篇：https://www.jb51.net/web/110275.html。 文章里面提到了用背景图和隐藏的img标签来预加载，调理很清晰。也可以作为参考。
另外，模仿新浪的cache.html自己写了个，如果喜欢把iframe作为独立文件使用的可以作为参考。
复制代码 代码如下:
<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>
<script>
//usage： cache.html?v=123
var win = window,
doc = document,
head = doc.getElementsByTagName("head")[0],
getQuery = function(){
var ret = {},
sch = win.location.search,
arr,
tmp;
if (sch) {
sch = sch.substr(1);
arr = sch.split("&");
for(var i = 0, j = arr.length; i < j; i++) {
tmp = arr[i].split('=');
ret[tmp[0]] = tmp[1];
}
}
return ret;
},
version = getQuery().v || '';
win.onerror = function(){return true}; //屏蔽js错误提示
win.onload = function(){
var b = doc.createElement("script");
b.src = 'http://xx/1.js?v=' + version;
head.appendChild(b);
//...
};
doc.write('<link href="http://xxx/3.css?version=' + version + '" \/>');
</script>
<img src="https://xxx/4.png" />
</body></html>
您可能感兴趣的文章: