预加载JavaScript/CSS但不执行

先罗列一些预加载JavaScript和CSS的方法(欢迎补充)：

1、动态创建节点

2、使用ajax请求

3、使用iframe

4、借用flash去请求资源

5、new Image().src = ‘xxx’;

 

好吧，一个方案一个方案来分析一下（要求是不允许执行Javascript和应用CSS，以免消耗系统资源）：

 

1、支持跨域，但请求后脚本会执行、样式会进行渲染，不符合要求 <排除掉>

2、不支持跨域，在静态资源部署在CDN上时有些麻烦 <排除掉>

3、这个要加载iframe就比较浪费了，资源下载了也会执行或应用，而且不太好共用(资源还得在页面写死了，需要预加载不同的资源还得来几个页面或是使用参数的形式，太不灵活了) <排除掉>

4、这个浏览器得先支持swf，然后还要考虑放文件根目录下放crossdomain.xml文件，还得与JS进行相互的调用(也可能不调，初始化的时候把要请求的资源作为参数传进去)。

可是可以，感觉有点麻烦，而且得花精力另写flash，而且还得维护它 <排除掉>

 

好吧，就只剩下最后一种了，光IE行，其它不行，怎么办？

本文的原文是有出处的，可以点击这里查看：www.phpied.com/preload-cssjavascript-without-execution/

 

在非IE中发现动态创建object元素然后附加到body上可以达到与IE中使用new Image()的效果<终于有了一根救命的稻草了>

 

直接上代码了：

window.onload = function () {

    var i = 0,
        max = 0,
        o = null,

        // list of stuff to preload
        preload = [
            'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.png',
            'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.js',
            'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.css'
        ],
        isIE = navigator.appName.indexOf('Microsoft') === 0;

    for (i = 0, max = preload.length; i < max; i += 1) {

        if (isIE) {
            new Image().src = preload[i];
            continue;
        }
        o = document.createElement('object');
        o.data = preload[i];

        // IE stuff, otherwise 0x0 is OK
        //o.width = 1;
        //o.height = 1;
        //o.style.visibility = "hidden";
        //o.type = "text/plain"; // IE 
        o.width  = 0;
        o.height = 0;

        // only FF appends to the head
        // all others require body
        document.body.appendChild(o);
    }

};

 

这个例子的测试页面，可以点击这里查看：http://phpied.com/files/object-prefetch/page1.php?id=1

 

 

要查看new Image().src为何不能在FF达到预期的效果，可以查原文的”Comments”

 

 

看来还有更多的”元素”需要我们去挖掘了 :)