如何创建一个简单的正在加载的CSS，该CSS在第一次加载页面时立即显示“正在加载”，并在页面加载完成后将其清除？

Question

我正在使用具有GWTP技术的Java脚本来构建我的应用程序。

好吧，我有一个要求。 我想使用加载CSS在页面首次加载时立即显示加载信息。 必须显示负载，然后才能开始下载任何javascript文件。

下载完所有JavaScript文件后，正在加载的CSS应该停止工作。

例如，当人们访问mydomain.com时，它应该在页面中间显示“ ..loading ...”指示符，并且在该页面开始可见之后，它应该隐藏正在加载的指示符。

我的Ajax页面的结构如下。

<html>
    <head>
       <meta>...</meta>
       <link type="text/css" rel="stylesheet" href="myCss.css">
       <script type="text/javascript" language="javascript" src="myproject.nocache.js">    </script> // this is where the big Javascript file got loaded
     </head>
     <body>
     <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position: absolute; width: 0;height: 0; border: 0;"></iframe>
      </body>
</html>

Answer 1

您不仅可以使用body标签的“ onload”属性吗？

将以下javascript行放到大型javascript文件的末尾即可使“加载”消失：document.getElementById（'loading'）。className ='loaded';

<!DOCTYPE HTML>
<html>
<head>
    <meta>...</meta>
    <link type="text/css" rel="stylesheet" href="myCss.css">
</head>
<script>
function pageLoaded(){
    var jsFile=document.createElement('script');
    jsFile.setAttribute("type","text/javascript");
    jsFile.setAttribute("src", 'myproject.nocache.js');
    document.getElementsByTagName("head")[0].appendChild(jsFile);
}
</script>
<style>
html{width:100%;height:100%;}
body{width:100%;height:100%;margin:0px;position:relative;}
div#loading{display:table;width:100%;height:100%;position:absolute;top:0px;left:0px;}
div#loading div{display:table-cell;width:100%;height:100%;text-align:center;vertical-align:middle;background-color:#cccccc;}
div.loaded#loading{display:none;}
</style>
<body onload="pageLoaded();">

<div id="loading">
    <div>LOADING...</div>
</div>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position: absolute; width: 0;height: 0; border: 0;"></iframe>

</body>
</html>

Answer 2

在HTML代码中将加载类添加到主体

<body class="no-mobile pc bootstrap loading">

当所有脚本加载完成后，删除body标签的加载类。

window.onload = function () {
    $("#body").removeClass('loading');
}

这只是示例，您可以使用纯JavaScript来删除主体的“加载”类。

像这样

使用body作为ID，因为我不能在其中放置自定义body标签。

Answer 3

(function (w, d, url, resource) {
    w.t = new Date().getTime();
    if (/webkit/i.test(w.navigator.userAgent)) {
        d.write("<style>#loading"
                + "{-webkit-animation:blink"
                + " 350ms linear 0s normal infinite forwards;}"
                + "@-webkit-keyframes blink{"
                + "0%{color:transparent;}100%{color:blue;}};"
                + "</style>");
    };
    d.write("<div id=loading"
            + " style=font-size:24px;position:relative;"
            + "left:45%;top:25%;-moz-text-blink:blink;>"
            + "loading...</div>");
    var script = d.createElement("script");
    script.src = url;
    script.async = true;
    script.type = "text/javascript";
    var head = d.getElementsByTagName("head")[0];
    head.appendChild(script);
    w.s = setInterval(function () {
        // check for `object` or `function`, i.e.g., `window.jQuery()`
        // set by `script` (`src`), `url`, resource at `window`,
        // at `1000ms` intervals , adjustable, e.g., `500`; `250`
      if (resource in w
          && typeof w.jQuery() === "object" 
          && typeof w.jQuery === "function" ) {
            // do stuff
            d.body.removeChild(d.getElementById("loading"));
            d.write("<span class=status>jQuery version: " 
                    + jQuery().jquery 
                    + "\n" 
                    + "estimated loading time: " 
                    + Number(new Date().getTime() - w.t) 
                    + "</span>");
            // do stuff
            // utilize `object`, `function`, data
            // loaded in `window`, `document`, 
            // from `script`, `url` , resource
            $("body")
            .append("<br><iframe "
                    + "src=http://api.jquery.com "
                    + "width=480 height=400></iframe>");
            $(".status").fadeOut(5000, function() {
                $(".status", this).remove();
            });
            clearInterval(w.s);
        };
    }, 1000);
}(window, document, "http://code.jquery.com/jquery-latest.js", "jQuery"));

jsfiddle http://jsfiddle.net/guest271314/27RTx/

如何创建一个简单的正在加载的CSS，该CSS在第一次加载页面时立即显示“正在加载”，并在页面加载完成后将其清除？

问题描述

3 个解决方案

解决方案1
0 2014-07-15 16:55:41

解决方案2
0 2014-07-15 18:04:47

解决方案3
0 2014-07-15 19:29:15

如何创建一个简单的正在加载的CSS，该CSS在第一次加载页面时立即显示“正在加载”，并在页面加载完成后将其清除？

问题描述

3 个解决方案

解决方案1 0 2014-07-15 16:55:41

解决方案2 0 2014-07-15 18:04:47

解决方案3 0 2014-07-15 19:29:15

解决方案1
0 2014-07-15 16:55:41

解决方案2
0 2014-07-15 18:04:47

解决方案3
0 2014-07-15 19:29:15