Как показать изображение при загрузке ajax

Я хочу показать изображение, когда ajax загружает страницу, затем спрятать его снова
, тогда я пробую этот код, но изображение не отображается сначала все сделанное в одно и то же время (php-страница занимает около 3 секунд, чтобы загрузить), так что, когда я удалить комментарий от линии $("img").css("display","none"); изображение никогда не появляются
здесь полный кодКак показать изображение при загрузке ajax

$(document).ready(function(){ 
    $("#al").click(function(){ 
     $("img").css("display","inline"); 
     xmlhttp=new XMLHttpRequest(); 
     xmlhttp.open("GET","ajax load.php",false); 
     xmlhttp.send(); 
     document.getElementById("showhere").innerHTML=xmlhttp.responseText; 
// $("img").css("display","none"); 
    }); 
});

источник

2014-02-02 robert

Я положил на css, что img отображается: none – robert

Итак, вы видите какие-либо ошибки в консоли javascript? –

no нет ошибки – robert

Как вы уже используете JQuery, таким образом, использовать .load() и скрыть изображение на его обратного вызова метод

$(document).ready(function() { 
    $("#al").click(function() { 
     $("img").css("display", "inline"); 
     $("#showhere").load("ajaxload.php", function() { 
      $("img").css("display", "none"); 
     }); 
    }); 
});

источник

2014-02-02 20:59:38 Satpal

это право thanx – robert

вы уже используете JQuery, так что вы можете использовать стандартный АЯКС объект, который занимает много вариантов среди которых: success и error: jQuery AJAX

В этих двух функций, которые вы должны поставить

$("img").css("display","none");

Хотя display:inline идет на одну строку выше вызова для отправки запроса Ajax.

источник

2014-02-02 20:58:59 pid

просто использовать JQuery Ajax $ .get функцию (я беру его РНР имя файла ajax_load.php?):

$(document).ready(function(){ 
    $("#al").click(function(){ 
     $("img").css("display","inline"); 
     $.get("ajax_load.php","",function(data) { 
      document.getElementById("showhere").innerHTML = data; 
      $("img").css("display","none"); 
     }); 
    }); 
});

источник

2014-02-02 20:59:07

это тоже правильно, ноxx – robert

Использование CSS

#Loading { 
    background:url(images/abc.gif) no-repeat center center; 
    height: 64px; 
    width: 64px; 
    position: fixed; 
    z-index: 1000; 
    left: 50%; 
    top: 50%; 
    margin: -25px 0 0 -25px; 
}

Использование HTML

<div id="Loading" class="dvLoading"> 
</div>

И Thn на перед Ajax вызов показать DIV и после Ajax вызова скрыть Div

$('.dvLoading').show(); 
$('.dvLoading').hide();

источник

2014-02-02 20:59:50 ajitksharma

abc.gif - изображение загрузчика – ajitksharma

Вы должны обернуть все после отображения встроенного в функции SetTimeout с задержкой 2-5 мс:

$(document).ready(function(){ 
    $("#al").click(function(){ 
     $("img").css("display","inline"); 
     setTimeout(function() { 
      xmlhttp=new XMLHttpRequest(); 
      xmlhttp.open("GET","ajax load.php",false); 
      xmlhttp.send(); 
      document.getElementById("showhere").innerHTML=xmlhttp.responseText; 
      $("img").css("display","none"); 
     }, 2); 
    }); 
});

Я не уверен, в чем главная проблема, но я знаю, что с помощью CSS иногда изменяющиеся свойства действуют как асинхронное действие. Спекулируя, я думаю, что у вас есть условие гонки, в котором изменения css конкурируют с запросом, и они в конечном итоге происходят все одновременно. Этот хак, по сути, говорит, что запрос ожидает несколько миллисекунд, что позволяет добавлять css в асинхронную очередь перед запросом.

источник

2014-02-02 21:18:16

Как показать изображение при загрузке ajax

ответ

Смежные вопросы