时间戳

首页 > 解决方案 > 需要调整预加载器脚本以不加载在 1 秒内加载的页面

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

问题描述

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

<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>

标签： javascripthtmldelaypreloader

解决方案

一秒从什么时候开始？请记住，您的 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>

推荐阅读