Menu
I wanted to show a loading icon to users until the page elements are fully loaded. How can I do that with javascript and I want to do it with javascript, not jquery?
Here is a link how google does it How can I do this? triggering some function on onload event or something like this .. I know it will be done somewhat like this or any other ways to do it? Or there is some event for it?
UPDATE I did something using display property I hide the body element but and onload of body tag I change its property but where to put the loading icon and add more interactivity.
543
Using Code Step 1: Add loader DIV tag inside body tag. This DIV helps to display the message. Step 2: Add following CSS how it is going to displaying in browser. Step 3: Add following jQuery code when to fadeout loading image when page loads.
click(function() { $('#divLoading'). show(); }); Alternatively, you can use the UpdatePanel that comes in the Ajax Toolkit or in ASP.NET 4.0. It has a control called UpdateProgress that displays a loading image automatically.
HTML
<body> <div id="load"></div> <div id="contents"> jlkjjlkjlkjlkjlklk </div> </body> JS
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"; },1000); } } CSS
#load{ width:100%; height:100%; position:fixed; z-index:9999; background:url("https://www.creditmutuel.fr/cmne/fr/banques/webservices/nswr/images/loading.gif") no-repeat center center rgba(0,0,0,0.25) } Note:
you wont see any loading gif if your page is loaded fast, so use this code on a page with high loading time, and i also recommend to put your js on the bottom of the page.
DEMO
http://jsfiddle.net/6AcAr/ - with timeout(only for demo)
http://jsfiddle.net/47PkH/ - no timeout(use this for actual page)
update
http://jsfiddle.net/d9ngT/
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
