How to create a simple Loading CSS that shows “loading” right at the first time the page got loaded & clear it after the page finished loading?
Question
I am using Java script with GWTP technology to build my app.
Ok, I have a requirement. I want to use loading CSS to show the loading information right at the first time the page got loaded. The loading must show before any javascript files begin to be downloaded.
After all javascript files got downloaded, the loading CSS should stop working.
For example, when people visit mydomain.com, it should show "..loading..." indicator in the middle of the page & after the page starts to be visible, then it should hide the loading indicator.
The structure of my Ajax page is as following.
<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>
3 answers
solution1
0 2014-07-15 16:55:41
Can you not just use the "onload" attribute of the body tag?
Put this javascript line to make the "loading" disappear at the end of the large javascript file : 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>
solution2
0 2014-07-15 18:04:47
Add loading class to body in the HTML code
<body class="no-mobile pc bootstrap loading">
And when all loading of scripts finished remove the loading class of body tag.
window.onload = function () {
$("#body").removeClass('loading');
}
This is just example, You can use pure javascript to remove 'loading' class of body.
Used body as ID, because I can't put custom body tag there.
solution3
0 2014-07-15 19:29:15
(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"));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.