Как я могу добавить preloader для загрузки содержимого div jquery?

Question

Привет, у меня есть этот jQuery для загрузки содержимого в div с кодом кнопки, но загружаемый контент включает в себя изображения большого размера и хотел бы появиться, поскольку он загружается в предварительную загрузку div анимированным gif, как может привести к вне?

код JQuery:

function chargue(div, of) 
{ 
$(div).load(of, function() { 
}); 
} 

Кнопка:

<a href="#next" onClick="chargue('#left','change.php')">CHANGE</a> 

CSS DIV #left:

#left { 
    width: 744px; 
    float: left; 
    height: 100%; 
    position:relative; 
} 

Answer 1

Вы можете просто изменить к содержанию вашего div в анимированный GIF загрузки , затем, когда ваш ajax get() будет готов, замените div с результатами.

function chargue(div, of) 
{ 
    //insert loading gif 
    $(div).html('<img src="image/loading.gif">'); 

    //fetch larger images 
    $.get(of, function(results) { 
    $(div).html(results); 
    }); 
} 

Answer 2

function chargue(div, of) 
{ 
    $('#loader').show(); 
    $(div).load(of, function(response, status, xhr) { 
     if(status == 'sucess'){ 
     $('#loader').hide(); 
     } 
    }); 
} 

Пожалуйста, создайте один дочерний элемент DIV под #left дел. И поставьте ваш загрузчик gif. Примечание: #loder div должен быть скрыт по умолчанию.