加载部分在第一次加载时不会消失答案

【问题标题】：Loading Section not disappearing on first load加载部分在第一次加载时不会消失
【发布时间】：2020-05-27 04:48:34
【问题描述】：

我制作了一个加载器，它使用 css 和 javascript 来播放动画。第一次加载网站时，动画有时不会播放，留下空白屏幕。我相信这与第二次加载时的缓存有关，使其工作。提前致谢。

HTML：

    <section id="loading">
        <div class="circle spin"></div>
        <img src="src/j2.svg" alt="J2 Logo">
    </section>
    <link rel="stylesheet" href="css/loading.css">
    <script type="text/javascript" src="scripts/loading.js"></script>

加载.css： https://pastebin.com/E16PMTtQ

加载.js： https://pastebin.com/1X09KatC

网站链接是https://j2.business

【问题讨论】：

标签： javascript html css caching browser-cache

【解决方案1】：

快速浏览一下您的代码，看起来所有代码都是在加载 javascript 文件时执行的。这可能是一个时间问题（您的 javascript 文件的检索速度比您的 HTML 页面快：它想要操作的元素尚不可用）。

使用 jQuery，您可以通过将变量和函数嵌入此支架中来快速解决这个问题：

$( document ).ready(function() {
    // place code here, the document is waiting
});

因为你没有使用 jQuery，你可以使用这个：

添加“延迟”属性。

<script type="text/javascript" src="scripts/loading.js" defer></script>

这应该足够了，规格在这里找到：

https://www.w3schools.com/tags/att_script_defer.asp

或者，如果您只想在加载文档时执行某些功能，您可以使用所有浏览器都支持的功能：

(function() {
    // place code here, the document is waiting
})();

【讨论】：