预加载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 相关文章推荐
javascript 跳转代码集合
Dec 03 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
vue中v-model对select的绑定操作
Aug 31 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 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
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
php的正则处理函数总结分析
2008/06/20 PHP
PHP脚本中include文件出错解决方法
2008/11/20 PHP
cmd下运行php脚本
2008/11/25 PHP
php 高性能书写
2010/12/11 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
jQuery 技巧小结
2010/04/02 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
pyv8学习python和javascript变量进行交互
2013/12/04 Python
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
Python实现不规则图形填充的思路
2020/02/02 Python
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
鼋头渚导游词
2015/02/05 职场文书
2015年小学开学寄语
2015/02/27 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android