需要调整预加载器脚本以不在 1 秒内加载的页面上加载

Question

php 这里的人不是 javascript 人。支持以下代码的站点，需要调整预加载器等待页面是否在一秒钟内加载，如果没有，则显示图像。我很无能并搜索示例，我发现的示例延长了预加载器时间，这不是我想要的，这是代码：

<script>
    document.onreadystatechange = function () {
        var state = document.readyState
        if (state == 'interactive') {
            document.getElementById('contents').style.visibility="hidden";
        } else if (state == 'complete') {
            setTimeout(function(){
                document.getElementById('interactive');
                document.getElementById('load').style.visibility="hidden";
                document.getElementById('contents').style.visibility="visible";
            },1);
        }
    }
</script>
<div id="load"></div>

Answer 1

一秒从什么时候开始？请记住，您的 Javascript 代码（用于检查此内容）也需要加载和解析。

无论如何，这应该会让您朝着正确的方向前进。请注意，#contents 一开始是隐藏的。

<div id="contents" style="visibility:hidden">Contents</div>
<div id="loader" style="visibility:visible"></div>
<script>
   setTimeout(function() {
      checkDocumentState();
   }, 1000);

  function checkDocumentState() {
     var state = document.readyState;
     if (state === 'loading') {
        // do something if you need to 
        // or do nothing
        console.log('Still loading');
        return;
     } else if (state === 'interactive') {
        //do something if you need to 
        // or do nothing
        console.log('Now getting images and stuff');
        return;
     } else if (state === 'complete') {
        // Make the content visible 
        // Do whatever else you need to do
        console.log('Everything is here. Show the contents.');
        document.getElementById('loader').style.visibility="hidden";
        document.getElementById('contents').style.visibility="visible";
     }
  }

</script>

Answer 2

在文档准备好之前尝试进行一些DOM操作（就像您的代码所做的那样）有些讽刺。通常，您要避免 DOM 操作，直到文档准备就绪。我推荐一种略有不同且更简单的方法。通过 CSS.

控制加载图像的可见性
目前，您的 #load 图片默认可见。要使其默认隐藏，请将 visibility: hidden; 添加到 #load 样式规则中。接下来，为 .loading #load 添加规则以覆盖 visibility 以使其可见。这意味着 #load 仅在其父元素之一具有 loading 的 class 时可见，从而激活覆盖 visibility.
的规则
#load { width:100%; height:100%; position:fixed; z-index:9999; background:url("../images/loading.gif") no-repeat fixed center rgba(255,255,255,1); visibility: hidden; } .loading #load { visibility: visible; }

有了 CSS，JavaScript 就相当简单了。我们将使用 setTimeout 设置 1 秒（1000 毫秒）的延迟，然后运行一个函数。该函数检查文档是否准备就绪，如果没有，则将 loading class 添加到根 HTML 元素，从而使 #load 图像可见 1解析脚本标签后的第二个。

我们还在文档上为 load 事件添加了一个事件侦听器（在 document.readyState 设置为 complete 后立即发生）。当该事件触发时，它会从根元素中删除 loading class。如果这在 1 秒之前发生在运行上，那没关系。根元素还没有 loading class 并不重要。在那种情况下，它永远不会，因为它只会在 readyState 尚未 complete.
时添加
setTimeout(function() { if (document.readyState != "complete") { document.documentElement.classList.add("loading"); } }, 1000); document.addEventListener("load", function() { document.documentElement.classList.remove("loading"); });

您应该熟悉 all of the possible values of document.readyState。您可能希望在文档 interactive 后立即隐藏您的加载图像。在这种状态下，并非所有图像都已下载，但文档已完全解析并准备好进行 DOM 操作。在这种情况下，您将监听 readystatechange 事件而不是 load 事件：

setTimeout(function() { if (document.readyState == "loading") { document.documentElement.classList.add("loading"); } }, 1000); document.addEventListener("readystatechange", function() { if (document.readyState != "loading") { // either interactive or complete document.documentElement.classList.remove("loading"); } });

需要调整预加载器脚本以不在 1 秒内加载的页面上加载

Need to Tweak Pre-loader script to not load on a page that loads in under 1 second

html

javascript

preloader

delay