预加载JS，但不要运行它

Question

我想在页面加载后预加载一个大的JS文件，以便当我链接到所需页面上的该JS文件时，该文件已经下载并缓存了。

目前，我基本上正在这样做，并且可以正常工作，但是当然这不是正确的方法：

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

这似乎是一种快速简单的方法，不需要Ajax等，并且效果很好。

正确的方法是什么？ 当然不能与Ajax一起使用，因为这似乎太过分了。

我知道有很多加载JS的方法，但是它们似乎都在脚本加载后实际运行了代码，这是我所不希望的。

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

Answer 1

从这篇博客文章 ：

预先预加载组件有助于提高性能。 有几种方法可以做到这一点。 但是，即使最干净的解决方案（打开iframe并在那里疯狂）也要付出代价-iframe的价格以及解析和执行预加载的CSS和JavaScript的价格。 如果您预加载的脚本假定它加载的页面与预加载的页面不同，则存在潜在JavaScript错误的风险也相对较高。

经过一番尝试和许多错误之后，我认为我想出了一些可以跨浏览器使用的功能：

• 在IE中使用new Image().src预加载所有组件类型
• 在所有其他浏览器中，使用动态<object>标签

在本示例中，我假定页面在加载后会预取页面下一页所需的某些组件。 这些组件是CSS，JS和PNG（精灵）。

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

有关更多详细信息，请参见该帖子 。

---

编辑：查看该帖子的评论，有人提到此链接 ， 该链接讨论IE和其他浏览器中new Image()预加载方法的问题。 摘录如下：

当IE遇到IMG标签时，它会创建一个图像对象并为其分配下载请求。 当数据从图像下载中到达时，数据被馈送到浏览器的图像解码器中。 如果您以纯文本格式提供数据，则解码器将拒绝格式错误的数据，这似乎是合理的，因为它们可能无法利用此类数据。 当解码器将数据拒绝为“不太可能是图像”时，图像对象将中止其处理。 作为中止的一部分，如果下载尚未完成，则它也将中止。

这解释了OP在下面的注释中提到的行为（IE9仅下载4KB的文件）。

似乎唯一可靠的跨浏览器选项可能是使用Ajax。

Answer 2

使用

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

window.document.onload确保直到dom准备好Java脚本才会运行

Answer 3

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

（1）使用Simon M的Firefox解决方案中的document.createElement（'object'）部分，因为效果很好。

（2）在其他所有浏览器中使用新的Image.src。 Opera，Safari和Chrome浏览器都喜欢它。 另外，我之前提到移动Safari不起作用。 确实可以，但是出于某种原因需要花100毫秒来验证某些内容（已正确缓存，而不仅仅是返回未修改的304）。 我可以忍受100ms。

我尚未测试其他移动浏览器。

（3）Bollocks对IE无效，