Question

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

好的，我有一个要求。我想使用加载CSS来在第一次加载页面时显示加载信息。加载必须在开始下载任何javascript文件之前显示。

在下载所有javascript文件后，加载CSS应该停止工作。

例如，当人们访问mydomain.com时，它应该显示＆＃34; .. loading ...＆＃34;页面中间的指示符＆amp;在页面开始可见之后，它应该隐藏加载指示符。

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

你能不能只使用＆＃34; onload＆＃34;身体标签的属性？

把这个javascript行放到＆＃34; loading＆＃34;消失在大型javascript文件的末尾：的document.getElementById（＆＃39;装载＆＃39）。类名=＆＃39;装载＆＃39 ;;

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

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

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

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

这只是一个例子，您可以使用纯JavaScript来删除“加载”正文类。

Like this

使用的身体作为ID，因为我不能在那里放置自定义身体标记。

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，在页面第一次加载时显示“正在加载”＆amp;页面加载完成后清除它？

3 个答案: