Chinaunix首页 | 论坛 | 博客
  • 博客访问: 29952775
  • 博文数量: 708
  • 博客积分: 12163
  • 博客等级: 上将
  • 技术积分: 8240
  • 用 户 组: 普通用户
  • 注册时间: 2007-12-04 20:59
文章分类

全部博文(708)

分类: Java

2011-11-14 09:50:29

     资源预加载可以提升用户体验,如果每次用户打开页面都要加载图片,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([
        
'',
        
'',
        
''
    ]);
}
阅读(1548) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~