Ajax загрузки GIF Добавление данных во время разговора

Question

У меня есть этот АЯКС вызов:

$('.ajaxtrigger2').click(function(){ 
$('#target').load('xxx.html'); 
... 

как присоединять Загрузка сообщ или изображения во время этого простого вызова? thx

Answer 1

Создать другой элемент, например.

<div id="loading" style="display: none">Loading...</div> 
<div id="target"></div> 

затем показать загрузочный элемент при запуске загрузки, и скрыть его, когда его сделали через load обратного вызова.

$('.ajaxtrigger2').click(function() { 
    $("#loading").show(); 
    $("target").load('xxx.html', function() { 
     $("#loading").hide(); 
    }); 
} 

Answer 2

Создайте Img, сделайте id равным чему-то вроде «загрузки» и имеет стиль по умолчанию, такой как «display: none»; а затем добавьте это в свой jQuery onReady event

$("#loading").ajaxStart(function() { $(this).show(); }).ajaxStop(function() { $(this).hide(); }); 

Answer 3

Мне лично нравится использовать css и добавлять удаленные материалы.

<style> 
#target.loading {background image you want, alongside some greying or whatever} 
</style> 
<script> 
.... 
$('.ajaxtrigger2').click(function(event){ 
$('#target').addClass("loading"); 
$('#target').load('xxx.html', function(data,text,xhr){ 
    $('#target').removeClass("loading"); 
}); 
}); 
... 
</script> 

Answer 4

есть несколько способов. Мой предпочтительный способ - присоединить функцию к событиям ajaxStart/Stop для самого элемента.

$('#loadingDiv') 
    .hide() // hide it initially 
    .ajaxStart(function() { 
     $(this).show(); 
    }) 
    .ajaxStop(function() { 
     $(this).hide(); 
    }) 
; 

Функции ajaxStart/Stop будут срабатывать при каждом вызове ajax.