预加载css或javascript的js代码


Posted in Javascript onApril 23, 2010

预加载文件一般有两种常用的方式:xhr和动态插入节点的方式。动态插入节点是最为简单也最为广泛的一种异步加载方式(例如yui的Get模块),然后使用动态插入节点方法加载的文件都会在加载后立即执行,javascript的执行一方面会占用浏览器js执行进程,另一方面也可能改变页面结构,而css的执行更有可能让整个页面变化。xhr方式虽然不会执行脚本,但是由于同域的限制,且如今网站的静态文件都是部署在cdn服务器上,如何预加载css js文件也变有点玄妙了。

Stoyan Stefanov 撰文简明的阐述了一种加载文件而不会让之执行的方法。原文可见 http://www.phpied.com/preload-cssjavascript-without-execution/

具体的方法是,ie中使用 new Image().src 去预加载文件,而其他浏览器使用动态插入的 <object> 标签来完成加载。
部分代码如下

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); 
} 
};

demo 可见 http://phpied.com/files/object-prefetch/page1.php?id=1

几点说明:
1. new Image().src 之所以不能在ff中使用是因为ff对图片实现了一套单独的缓存。 同时safari和chrome看起来也没有被缓存。

2. 动态插入的 object 标签需要插入到非 head部分,以触发加载。

3. ie7 ie8 也可以通过一些代码使用动态object加载文件(代码注释中有提到)。但是作者发现object 通常会消耗很大, so...

通过自身的实验发现相当不错的,有需求的同学不妨一试。

Javascript 相关文章推荐
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 #Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 #Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 #Javascript
js 文件引入实现代码
Apr 23 #Javascript
网页图片延时加载的js代码
Apr 22 #Javascript
基于jQuery的表格操作插件
Apr 22 #Javascript
JQuery实现的在新窗口打开链接的方法小结
Apr 22 #Javascript
You might like
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
php 获取mysql数据库信息代码
2009/03/12 PHP
PHP 进程锁定问题分析研究
2009/11/24 PHP
PHP获取文件后缀名的三个函数
2012/10/15 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
JQuery select标签操作代码段
2010/05/16 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
使用python Django做网页
2013/11/04 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
审核会计岗位职责
2013/11/08 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
运动会开幕词
2015/01/28 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
村主任当选感言
2015/08/01 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
Redis中一个String类型引发的惨案
2021/07/25 Redis