预加载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”
看来还有更多的”元素”需要我们去挖掘了 :)
- javascript 面向对象(多种创建对象的方式)
- 1711: [Usaco2007 Open]Dingin吃饭
- 1574: [Usaco2009 Jan]地震损坏Damage
- HTTPS科普(转) 为什么需要https
- 1590: [Usaco2008 Dec]Secret Message 秘密信息
- 1751: [Usaco2005 qua]Lake Counting
- 算法模板——单个值欧拉函数
- webpack前言:前端模块系统的演进
- webpack学习(一):webpack 介绍&安装&常用命令
- pd_ds中的hash
- webpack学习(二):先写几个webpack基础demo
- js实现php中sleep()延时的功能
- 洛谷P2118 比例简化(暴力)
- php 中进制之间的转换
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 重发和重定向有什么区别与重定向应用
- 为tinycolinux制作应用包
- CrossC2的2.0版本
- 使用OpenCV和Python计算图像的“色彩”
- 为tinycolinux创建应用包-toolchain和编译方法
- [译]在Solidity中如何优化Gas第一部分:变量
- [译]Solidity 0.7.0 新变化
- 两个数组的交集 II
- 常说的手机刷新率60Hz、120Hz有什么不同?
- Istio 运维实战系列(3):让人头大的『无头服务』-下
- java安全编码指南之:可见性和原子性
- java安全编码指南之:敏感类的拷贝
- 测试面试题集-MySQL数据库灵魂拷问
- Linux提权姿势一:滥用SUDO提权
- Linux提权姿势二:利用NFS提权