资源预加载可以提升用户体验,如果每次用户打开页面都要加载图片,js,css等资源,会影响用户体验。资源预加载可以一定程度上改善这种情况。
我们可以做的是,但第一个页面load完的时候,在用户阅读网页的空隙,把下一个页面所用的资源提前加载过来cache住,这样下个页面就直接读缓存资源了,这样可以一定程度改善用户体验。
那么预加载资源需要解决的主要问题是JS加载过来不会被直接执行,css加载过来不会更改页面样式。
这样就会产生很多方案, 这里介绍一种不错的兼容方案:
1. IE下用new Image()来加载
2. 其余浏览器使用object元素来加载
原因
- new Image().src doesn't
do the job in FF because it has a separate cache for images. 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 object element has to be outside the head in most browsers in order to fire off the downloads
- dynamic object works
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.
【程序源码】
function preload(arr) {
var i = arr.length,
o,
d = document,
b = document.body,
isIE = /*@cc_on!@*/0;
while (i--) {
if (isIE) {
new Image().src = arr[i];
continue;
}
o = d.createElement('object');
o.data = arr[i];
o.width = o.height = 0;
b.appendChild(o);
}
}
window.onload = function () {
preload([
'',
'',
''
]);
}
阅读(1596) | 评论(0) | 转发(0) |