预加载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”

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Youngxj

QQ网址强制变XML卡片消息工具

3.1K60
来自专栏IT 指南者专栏

Angular 框架学习笔记(一)

过来人肯定都知道, Angular 是一个框架,为何现在突然要学 Angular 呢?

14930
来自专栏自由而无用的灵魂的碎碎念

解决每次从cmd进入sqlplus,都得重新设置pagesize、linesize的问题

如上图,经过测试,主要需要更改屏幕缓冲区大小,这里更改宽度为130。为防止每次进入cmd都调节窗口的大小,这里设置窗口大小,宽度为与缓冲区一致。

10220
来自专栏全栈之路

游戏优化之音频压缩

其实这个比较容易忽略掉,但是音频资源如果不压缩的话,可能会造成游戏加载速度慢,尤其是对于一些音频资源依赖较高的游戏。

28930
来自专栏卡少编程之旅

fiddler抓包工具(windows)

864150
来自专栏wblearn

程序员的你是否熟练掌握Chrome开发者工具?

回归正题,本文主要是介绍一下Chrome developer tool(开发者工具)的使用,以方便我们的日常开发与调试。其实在没用Chrome开发之前就时不时的...

13340
来自专栏达摩兵的技术空间

mint-ui loadmore 采坑指南

loadmore的部分主要是mint-ui用来解决上拉以及下拉的部分,用来做加载更多数据或者刷新的部分。

25730
来自专栏吴伟祥

Fiddler是位于客户端和服务器端的HTTP代理(目前最常用的http抓包工具之一)

抓包工具有很多,小到最常用的web调试工具firebug,达到通用的强大的抓包工具wireshark.为什么使用fiddler?原因如下:

17440
来自专栏py+selenium

py+selenium 直接给日期赋值,控制台调试报错【已解决】

         其实既然可以去除readonly属性,那就可以直接给属性赋值,将两行代码缩为一行。

23830
来自专栏CodingToDie

Selenium - Web Browser Automation, 没有你想象的那么难

从去年开始接触 selenium,中间间隔了几个月,最近几天又开始使用,在此总结一下这两次使用的经验

18220

扫码关注云+社区

领取腾讯云代金券