[转]资源预加载

资源预加载可以提升用户体验，如果每次用户打开页面都要加载图片,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 = /*@[email protected]*/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/