如何在香草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() 。