如何創建一個簡單的正在加載的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