jQuery/JS page loading
I taked a search over the website, b开发者_StackOverflow社区ut I couldn't find what exactly I want.
So I want when the page loads to display AJAX loader iamge (for example), not to stay white...
Please give more detailed code, I'm new.
Thanks!
$(function(){
var ajax_load = "<img src='images/loading.gif' alt='loading...' />";
$('body').html(ajax_load);
var postData = $("#form").serialize();
$.ajax({
type: "POST",
url: "ajaxpage.php",
data: postData,
success: function(body){
$('body').html(body);
}
});
});
I believe that is what you want.
Structurally, it would be something like this:
- Load the DOM with empty containers, including the "loader image"
- Load javascript files which load your content and fills the containers
- Attach javascript event handlers to all links to override the default behavior of loading a new page
But you will be better off using some sort of framework for it. "Hash bang" (#!) is a popular pattern, make a google search for it.
Good luck!
To make it more apparent, imagine we have HTML page with this markup:
<button id="btnLoad">Load Content</button>
<div id="content">
Please click "Load Content" button to load content.
</div>
We want to load content when a user clicks on the "Load Content" button. So we need to bind a click event to that button first and make AJAX request only after it is fired.
$("#btnLoad").click(function(){
// Make AJAX call
$("#content").load("http://example.com");
});
he above code loads contents from http://example.com into the . While the page is being loaded we want to display our animated GIF image in the "content". So we could further improve our code like so:
$("#btnLoad").click(function(){
// Put an animated GIF image insight of content
$("#content").empty().html('<img src="loading.gif" />');
// Make AJAX call
$("#content").load("http://example.com");
});
The .load() function would replace our loading image indicator with the loaded content.
You might be using jQuery’s other AJAX functions like $.ajax(), $.get(), $.post(), in this case use their callback function to remove loading image/text and append your loaded data.
Here is also the solution for having the content hidden until the ajax call is completed to reveal it.
CSS:
<style type="text/css">
#content
{
display:none;
}
</style>
jQ:
$(function () {
var loadingImg = $('#loadingImage');
loadingImg.show();
$.ajax({
url: "secondpage.htm",
cache: false,
success: function (html) {
loadingImg.hide();
$("#content").append(html).fadeIn();
}
});
});
HTML:
<body>
<img src="loader.gif" id='loadingImage' alt='Content is loading. Please wait' />
<div id='content'>
</div>
</body>
加载中,请稍侯......
精彩评论