预加载css或javascript的js代码
更新时间：2010年04月23日 20:03:30 作者：
为了提高网站的加载速度，有一个很重要的手段就是在用户浏览过程中的上游网站做一个文件的预加载。
预加载文件一般有两种常用的方式：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...
通过自身的实验发现相当不错的，有需求的同学不妨一试。
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...
通过自身的实验发现相当不错的，有需求的同学不妨一试。
相关文章
这篇文章主要为大家详细介绍了如何简单实现js进度条加载效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
所谓的提升用户体验,其实就是把所有用户视为懒鬼,比如JavaScript自动完成(Autocomplete)脚本, 常用于表单,用户只需输入一两个字母,就为你扩展、联想、匹配和供君选择,2009-10-10
在ES6中，引入了同步iteration的概念，随着ES8中的Async操作符的引用，是不是可以在一异步操作中进行遍历操作呢？今天要给大家讲一讲ES9中的异步遍历的新特性Async iteration。2021-06-06
这篇文章主要给大家介绍了关于微信小程序登录的那些事，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
通过 window.opener 实现。关于这个对象的用法请查阅相关资料。2008-11-11
继承是面向对象编程中又一非常重要的概念，JavaScript支持实现继承，不支持接口继承，实现继承主要依靠原型链来实现的2017-06-06
这篇文章主要介绍了使用js实现单链解决前端队列问题的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
正因为JavaScript本身没有完整的类和继承的实现，并且我们也看到通过手工实现的方式存在很多问题， 因此对于这个富有挑战性的任务网上已经有很多实现了2009-07-07
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
尽管那需要用长串的、沉闷的不同分支代码来应付不同浏览器的日子已经过去，偶尔还是有必要做一些简单的区分和目标检测来确保某块代码能在用户的机器上正常运行。2010-06-06
JavaScript:void(0)用法及一些常见问题解决办法
这篇文章主要介绍了javascript:void(0)在JavaScript中的用法,探讨了其防止链接默认行为的作用,提供了使用示例,并针对常见问题如与#的区别、事件绑定和键盘访问进行了讲解,需要的朋友可以参考下2024-12-12
最新评论