Ajax loading gif добавление во время звонков

Question

У меня есть вызов ajax:

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

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

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

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

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

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

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

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

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