Question

这里的php guy不是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代码（用于检查此问题）也需要加载和解析。

无论如何，这应该向正确的方向发送信息。请注意，SELECT s.Abbr AS StateAbbr , SUM(CASE WHEN dw.FiscalYear = 2017 AND dw.MaltreatmentSetCode != '999' AND dw.MaltreatmentSetCode != '' THEN 1 ELSE 0 END) AS cnt FROM ( -- unique list of state abbreviations SELECT n.StateAbbr AS Abbr FROM DataWarehouse n WHERE (NOT n.MaltreatmentSetCode = '999' ) AND n.FiscalYear = 2017 GROUP BY n.StateAbbr ) s LEFT JOIN DataWarehouse dw ON dw.StateAbbr = s.Abbr GROUP BY s.Abbr ORDER BY s.Abbr ASC最初是隐藏的。

  public void genericOperation(String username, String password) throws AuthFailedException(){
    if(username == null || password == null) throw new NullPointerException();
    AuthMethod(username,password) 
    }

Answer 2

在文档准备好之前，尝试进行某些DOM操作（就像您的代码一样）有些讽刺意味。通常，您希望在文档准备好之后的之后避免DOM操作。我建议使用稍微不同且更简单的方法。通过CSS控制加载图片的可见性。

当前，您的#load图片默认可见。要使其默认处于隐藏状态，请将visibility: hidden;添加到#load样式规则中。接下来，为.loading #load添加覆盖visibility的规则以使其可见。这意味着#load仅在其父元素之一具有loading类时才可见，从而激活覆盖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 ms）的延迟，然后运行一个函数。该函数检查文档是否准备就绪，如果没有，则将loading类添加到根HTML元素中，从而使#load图像在解析script标签后1秒钟可见。

我们还为load事件（在document.readyState设置为complete之后立即发生）在文档上添加了一个事件侦听器。当该事件触发时，它将从根元素中删除loading类。如果这恰好在1秒钟前运行，那没关系。根元素还没有loading类也没关系。在那种情况下，它永远不会，因为只有在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");
    }
});

需要调整Pre-loader脚本才能在不到1秒的时间内加载页面

2 个答案: