Javascript 预加载JS，但不要'；我不能运行它

我想在加载页面后预加载一个大的JS文件，这样当我链接到所需页面上的JS文件时，它就已经被下载并缓存了

我现在基本上是这样做的，它是有效的，但当然不是正确的方式：

preload_js = new Image();
preload_js = "http://domain.com/files/file.js";

这似乎是一种快速而简单的方法，不需要Ajax等，而且效果非常好

正确的方法是什么？对于Ajax肯定不行，因为这似乎有点过头了

我知道有很多方法可以加载JS，但它们似乎都是在脚本加载后运行代码的，这是我不想要的

我不想使用jQuery（或任何库），它必须是纯JS。感谢您的帮助。

来自：

提前预加载部件有利于提高性能。有 有几种方法可以做到这一点。但即使是最干净的解决方案（打开 iframe和go crazy）是有代价的——iframe的代价 以及解析和执行预加载的CSS和 JavaScript。还有一个相对较高的潜在风险 如果预加载的脚本假定已加载到 与预加载页面不同的页面

经过一番尝试和许多错误，我想我想出了一些办法 这可以跨浏览器工作：

• 在IE中，使用

  new Image（）.src

  预加载所有组件类型
• 在所有其他浏览器中，使用动态
  标记

在本例中，我假设页面在加载一些内容后进行预取 下一页将需要的组件。组件是一个 CSS、JS和PNG（精灵）

window.onload=函数（）{
var i=0，
最大值=0，
o=零，
//要预加载的内容列表
预载=[
'http://tools.w3clubs.com/pagr2/.sleep.expires.png',
'http://tools.w3clubs.com/pagr2/.sleep.expires.js',
'http://tools.w3clubs.com/pagr2/.sleep.expires.css'
],
isIE=navigator.appName.indexOf（'Microsoft'）==0；
对于（i=0，max=preload.length；i

有关更多详细信息，请参阅

---

EDIT:查看那篇帖子上的评论，有人提到，其中谈到了IE和其他浏览器中的

new Image（）

preload方法的问题。这里有一段摘录：

当IE遇到IMG标记时，它会创建一个图像对象并指定 下载请求已发送到它。当图像下载的数据到达时， 它被输入浏览器的图像解码器。解码器将拒绝 如果以明文形式提供数据，则认为数据格式不正确，这似乎是合理的， 因为他们不可能利用这些数据。当解码器 拒绝数据为“不可能是图像”，图像对象将 中止其处理。作为中止的一部分，如果下载尚未完成 虽然完成了，但它也被中止了

这解释了OP在下面的评论中提到的行为（IE9只下载4KB的文件）

看起来您唯一可靠的跨浏览器选项可能是使用Ajax…

使用

window.document.onload =function(){
preload_js = "http://domain.com/files/file.js";
}

---

window.document.onload确保在dom准备就绪之前java脚本不会运行

考虑到Ajax的跨域问题，尤其是由于无法在无法控制的服务器上加载文件（例如，托管jQuery的Google CDN），这是我的解决方案：

（1） 使用Simon M针对Firefox的解决方案中的document.createElement（“对象”）部分，因为这非常有效

（2） 在其他浏览器中使用新的Image.src。歌剧、狩猎和铬元素都很喜欢。另外，我之前提到，Mobile Safari不起作用。确实如此，但由于某些原因，验证某些内容需要100毫秒（它被正确缓存，并且它不仅仅返回未修改的数据）。我能忍受100毫秒

我还没有测试过其他移动浏览器

---

（3） 胡说IE什么都不管用。

我怀疑没有“更清洁”的解决方案。好问题。很好的技巧。你能不能把你的代码包装在一个函数声明中，你可以在需要的时候调用它，并将它包含在一个

标记中？为什么ajax会过度使用？是的，它需要更多的代码，但实际上至少与Image（）技巧的开销相同。Ajax甚至可能更快一些，因为它不会触发浏览器的图像解码例程。我不接受这个答案，因为我遇到了大问题。目前的代码在iPhone和IE9上会导致问题（我还没有真正测试过更多）。iPhone需要很长时间才能加载（使用代码中的方法），并且更喜欢代码用于IE的方法（这样就可以正常工作）。IE9只下载大约4k的文件，这是无用的。感谢您指出解决方案，但它不可用。好的，看来需要AJax。问题是所有这些跨领域的垃圾。所有JS文件都在CDN上，包括由Google CDN托管的jQuery，但我一直遇到跨域问题。我读过JSONP，但人们一直在谈论回调。我只想预加载一个文件。这个image.src示例快速而简单（如果有效的话！）。有没有一个简单的参数可以添加到我的Ajax中？我使用的是一个基本的Ajax脚本。这完全误解了问题。+1表示“胡说八道”。。。为IE进行预加载可能不值得花时间，即使它提前得到了脚本，执行它们仍然需要一周的时间；）

window.document.onload =function(){
preload_js = "http://domain.com/files/file.js";
}