Geek asks and answers

JQuery.load when completely disappears and removes the bootloader

I use jQuery.load function to get 3 list items from another page. It works fine, but I was wondering how to add a “boot counter” while loading content and how to disappear in my content when it is loaded.

My code is:

$('.homeProducts').load('http://localhost/products #product_list li:lt(3)');

PS I do not know that this is the right way to get these products, but it works for me.

+3
source share
2 answers

It was best to use global events ajaxStartand ajaxStop:

$('#yourSpinner').ajaxStart(function() {
    $(this).show();
}).ajaxStop(function() {
    $(this).hide();
});

The event ajaxStartfires when the number of pending ajax requests increases from 0 to 1, and the event ajaxStopfires when all ajax requests complete.

+4
source

- :

$("#content").html('<div align="center"><img style="margin: 10px 0px 10px 0px;"
align="center" src="ajax-loader.gif"></div>');              
setTimeout('do()', n); 

 ...    
function do(){
$("#content").load('http://localhost/products #product_list li:lt(3)',{},function(){
$(this).fadeIn();
});                                                     
}

n - , . , .

+1

More articles:


All Articles