资源预加载

      资源预加载可以提升用户体验，如果每次用户打开页面都要加载图片,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([
         ' http://localhost/load.js ' ,
         ' http://localhost/load.css ' ,
         ' http://localhost/load.jpg '
    ]);
}

 

 

【相关链接】

http://www.phpied.com/preload-cssjavascript-without-execution/

http://www.phpied.com/the-art-and-craft-of-postload-preloads/

http://headjs.com/

转载于:https://www.cnblogs.com/bluedream2009/archive/2010/12/05/1897281.html