How I can build a page progressbar at page_load using jquery?
hi开发者_StackOverflow社区 folks
The title says my question.You mean something like showing gif animation until all scripts, texts and images are loaded into page?
I think the key is in using jQuery with document ready and image load events. Document ready will be triggered after all text and scripts are loaded, which may occur before all images are loaded (especially large ones). This is where usage of image load event comes in.
Also you should refactor your html code to look like this:
- remove any script tags from head if possible and place them in body.
- put just meta tags and stylesheet links in head.
- in body create #loader div (with all markup and style needed), and then place your normal html content and include js libraries.
- lastly, setup a javascript that will check document readiness and image load finish.
This is very simple example:
<!DOCTYPE html>
<html>
<head>
<title>Loader</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<!-- only style scripts and other meta tags except js libs may be put here -->
</head>
<body>
<div id="loader" style="background:red; width:50px; height:50px; position: fixed; margin: auto auto;"></div>
<!-- all other tags, images and js libraries must be included after "loader" div -->
<h1>This is loader demo</h1>
<p>Cras ultricies; orci vel adipiscing tempus, dui nisl faucibus urna, id viverra felis felis et dolor. Sed eget tellus et dolor volutpat viverra. Donec auctor sem eu sapien facilisis auctor?
<img id="very-big-image" style="float:left; padding: 10px;" src="http://upload.wikimedia.org/wikipedia/commons/e/e5/Chrysler_Building_Midtown_Manhattan_New_York_City_1932.jpg" alt="Manhattan high resolution" width="600" />
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vehicula lacus id nulla porta eget tristique risus laoreet. Suspendisse condimentum sodales neque quis tempor?
</p>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
var imgs_loaded = 0;
var imgs_count = 0;
// Document ready will be triggered only after all scripts are loaded.
// Document ready may get triggered even before all images are loaded, so we have to manualy check if all images are loaded
$(document).ready(function(){
window.imgs_count = $('img').length; // first count how many images there is
if(window.imgs_count){ // if any image exists do the loading check
$('img').load(afterImageLoad);
}
else { // if no images just hide #loader
$('#loader').hide(); // or .remove()
}
});
function afterImageLoad(){
window.imgs_loaded++;
if(window.imgs_count == window.imgs_loaded){ // if all images loaded
$('#loader').hide(); // or .remove()
}
}
</script>
</body>
</html>
Notice that this does not solve the problem of loading background images, although that can be solved by image preloading then using jquery to attach css background-image propery manualy to every element using background images.
I hope this solves your problem.
Ivan
加载中,请稍侯......
精彩评论