如何在 vanilla javascript 中预加载大型 css 和 javascript 文件答案

【问题标题】：How to preload large css and javascript files in vanilla javascript如何在 vanilla javascript 中预加载大型 css 和 javascript 文件
【发布时间】：2015-08-27 16:14:20
【问题描述】：

我正在构建一个单页应用程序，该应用程序将在世界上连接速度慢且带宽低的地区的平板电脑上运行。

因为 javascript 文件和 css 文件都很大，css 文件是 250kb，而主要的 js 文件是 750kb，我正在寻找一个最佳实践来预加载 css 和 javascript 文件而不必先加载首先是 JQuery 等库。

简而言之：在没有第三方库的情况下预加载 css 和 js 文件并在加载所有文件后进行某种回调的好方法是什么

【问题讨论】：

这些对于 css/js 来说非常大，你压缩了吗？
这个答案可能对stackoverflow.com/questions/6806849/…有帮助
是的，很遗憾，这些是缩小的文件

标签： javascript css preload

【解决方案1】：

创建一个默认显示的内联 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()。

【讨论】：

【解决方案2】：

[...] 必须首先加载 JQuery 等库。

您想要实现的目标可以在没有库或框架的情况下完成（实际上他们仍然在底层使用 vanilla JS），无论如何，当每个人都不尝试每天重新发明轮子时，科学就会继续发展。

有一些简单但功能强大的库，它们占用的空间非常小，可用于异步加载 JavaScript 和 CSS 文件，效果非常好。

例如，HeadJS 是一个 1.9KB 库，它可以解决您的问题：

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

【讨论】：