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

Question

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

因为javascript文件和css文件比较大，目前css文件有250kb而主js文件有750kb，我正在寻找一个最好的做法来预加载css和javascript文件而不必先加载首先是 JQuery 等库。

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

Answer 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()。