loading for HTML5
I am launching a mobile site and I want it to have a loading icon while loading all the content and images.
Details: I have s开发者_高级运维everal pages. I want when I click on it will load the pages (to other html page), but I don't want to show the page without fully loaded and I want to show loading animation while it loading all the content. Once, the content is fully loaded. then the loading animation have to hide.
How to do that?
You can make a large <div> at the beginning of the page, then hide it using Javascript in the load event or using an illegal <style> block at the end of the <body>.
You need to give a more specific question to get more specific (useful answers).
In the meantime here are some (hopefully useful) resources:
http://www.devcurry.com/2009/05/display-progress-bar-while-loading.html
http://jquery-howto.blogspot.com/2009/04/display-loading-gif-image-while-loading.html
http://banagale.com/display-a-simple-loading-message-and-animated-loading-gif-using-javascript.htm
http://yensdesign.com/2008/11/how-to-create-a-stylish-loading-bar-as-gmail-in-javascript/
This one may come particularly if it applies to your situation:
Showing a div while page is loading, hiding when its done
Good luck!
Any number of ways, but you will need javascript.
You are ready when all image assets have been loaded. Define full screen div that covers the whole page. In this div, show e.g. loading spinner animated gif and what ever text you want.
<html>
<head> .. </head>
<body>
<div id="loader"> .. </div>
<div id="content" style="display:none"> .. </div>
<script> .. </script>
</body>
</html>
On your script preload all images. This ensures that they are in cache when they are needed.
<script>
var loadc = 0;
function _preload(path) {
var image = new Image;
image.src = path;
image.addEventListener('load', function() {
loadc++;
if (loadc == images.count) {
$("#loader").hide();
$("#hide").show();
}
// update here progress counter on loading div
};
}
var images = [ '/image/some.png', '/foo/bar.png' ]
$(document).ready(function() {
for (var i = 0 ; i < images.length; i++) _preload(images[i]);
});
</script>
You need to define in images array all assets that you want to be ready when content div is shown, this includes stuff referred from CSS and DOM and possible dynamic DOM. You can use this same method for other assets, like audio and json.
加载中,请稍侯......
精彩评论