测试结果:
FF/OP/CM: 无论是img/js/css,都返回304。
IE6-8:用object加载img/js/css,会直接Aborted。
IE9比较特殊:
IE9加载js/css,先请求并返回HTTP200,再请求并Aborted,这里实际上是请求1次(第2次Aborted了)。
IE9加载img的情况,先请求并返回HTTP200,再请求返回图片,所以图片需要请求2次。
IE9的第1次请求返回的内容是空的(并且此时浏览器一般会卡住,或者直接失去响应)。 IE9首先会请求url,获取文件类型,判断是JS/CSS就Aborted,判断是图片才加载。
至于IE9第1次请求,大概是靠读取HTTP头信息来得到文件类型,或者偷偷把文件下载下来,然后在沙盒里面测试文件类型。
一个有意思的事情,比如用object加载JS,IE9有时也能加载进来,也就是第1个请求没判断出文件是JS(想看到这个要看运气了,貌似网速慢的时候可能发生)
据说以前IE是靠文件后缀来判断文件类型的,后期用HTTP头信息来判断,而他们都可以伪造,所以object在IE下存在安全问题。
IE6/7,如果文件后缀后缀为.js/.css不会发出请求,如果改成?123.png,就发送请求了,然后用script标签引入,发现可被缓存(css这样搞也OK^^)。
IE8,后缀为js/css也不会发出请求,改后缀为png可以发出请求并得到内容,然后页面创建标签引入,文件并没有被缓存。但如果文件是真正的图片就被缓存了。
题外话:通过上面可以发现,随着IE的升级,安全性也越来越高了。
So,这里的结论是:FF/OP/CM下可以用object预加载,IE就千万别用了。
3、测试用iframe预加载
先创建页面a.html,然后加上下面的js。
复制代码 代码如下:
var doc = document,
ifm = doc.createElement("iframe");
//ifm.id="preLoadIfm";
// ifm.style.border = ifm.width = ifm.height = 0;
ifm.style.cssText = 'position:absolute;top:-10px;border:0;width:1px;height:1px;';
ifm.scrolling = "no";
doc.body.appendChild(ifm);
window.onload = function(){ // 预加载当然最好是window.onload之后触发
//要触发onload,需要先appendChild,然后再写onload(如果顺序颠倒,IE下不能触发)
// ifm.onload = function(){ alert('ifm loaded'); }
// contentWindow.document-所有都支持,contentDocument-IE9/FF/OP/CM支持
var ifmDoc = ifm.contentDocument || ifm.contentWindow.document;
ifmDoc.open();
ifmDoc.write('<!doctype><html><head></head><body>');
//ifmDoc.write('<style>html{background:#000;color:#fff}</style>'); // 用于测试
//ifmDoc.write('<script>alert("a")<\/script>'); // 用于测试
//ifmDoc.write('<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>');// 用于测试
// 开始加载
ifmDoc.write('<link href="https://localhost/123.css?2011" />');
ifmDoc.write('<script defer src="https://localhost/123.js?2011"><\/script>'); //不加defer,你会发现IE卡死。。
ifmDoc.write('<img src="https://localhost/123.png?2011" />');
ifmDoc.write('</body></html>');
ifmDoc.close();
};
然后创建新页面b.html,把要上面预加载的文件加到html里面,测试是否已经预加载。
结果:IE/FF/OP/CM都成功预加载。