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

Question

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

因为javascript文件和css文件比较大，目前css文件250kb，js主文件750kb，求一个预加载 css 和 javascript 文件的最佳做法，而不必先加载 JQuery 等库。

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

Answer 1

[...] having to first load libraries such as JQuery first.

你想要实现的目标可以在没有库或框架的情况下完成（实际上他们仍然在引擎盖下使用 vanilla 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()。

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

How to preload large css and javascript files in vanilla javascript

javascript

css

preload