如何在香草javascript中預加載大型CSS和javascript文件

Question

我正在構建一個單頁面應用程序，該應用程序將在世界上連接速度較慢且帶寬較差的地區的平板電腦上運行。

由於javascript文件和css文件很大，目前css文件為250kb，主要js文件為750kb，我正在尋找一種最佳方法來預加載css和javascript文件，而不必先加載諸如首先使用jQuery。

簡而言之：在沒有第3方庫的情況下預加載css和js文件並在加載所有文件后進行某種回調的好方法是什么

Answer 1

首先必須加載諸如JQuery之類的庫。

您可以在沒有庫或框架的情況下完成您想要的目標（實際上，他們仍然在使用引擎蓋JS），無論如何，當每個人都沒有每天嘗試重新發明輪子時，科學就在前進。

有一些簡單但功能強大的庫，它們的占用空間非常小，可以異步加載像魅力一樣工作的JavaScript和CSS文件。

例如， HeadJS是一個1.9KB的庫 ，它可以解決您的問題：

head.load("myfile1.js", "myfile2.js", "mystyles.css", function() {
   // Do stuff once they got loaded!
}); 

Answer 2

創建一個默認顯示的內聯html / css預加載器。

然后，使用JavaScript，可以在下載所有內容后使用文檔readyState隱藏預加載器：

document.onreadystatechange = function () {

// check the value - if it's 'complete' then everything has loaded
if (document.readyState === "complete") {
    // add code here
    // alert('everything has downloaded!')
    // e.g. preloader.style.display = 'none';   
    }
}

這等效於您將在jQuery中使用的$(window).load() 。