时间戳

首页 > 解决方案 > 加载部分在第一次加载时不会消失

javascript - 加载部分在第一次加载时不会消失

问题描述

我制作了一个使用 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>

loading.css： https ://pastebin.com/E16PMTtQ

loading.js： https ://pastebin.com/1X09KatC

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

标签： javascripthtmlcsscachingbrowser-cache

解决方案

快速查看您的代码，看起来所有代码都在加载 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
})();

推荐阅读