預加載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無效，