2013-05-30 3 views
3

Я использую ajax-загрузчик (например, изображение Please-wait .gif) для вызовов ajax. До некоторых дней он работал отлично и показывался в хроме.Ajax loader не отображается в chrome

Я не видел никаких проблем с изображением, иначе мы его не изменим. Он корректно отображается в IE, Mozilla и в других браузерах, но я не понимаю, почему он не отображается в хроме.

Я просмотрел Ajax Loader Not Showing in Google Chrome, но не получил никакой помощи.

HTML-наценка

<div id="divajaxProgress" class="progressouter" style="display: none;"> 
    <div class="ProgressInner"> 
     <img alt="" title="Please wait..." src="../Images/ajax-loader.gif" /> 
    </div> 
</div> 

divajaxProgress будет отображаться, когда Ajax вызов будет, простой пример загрузки страницы. Вот функции

function HideProgress() {     
    $("#divajaxProgress").hide(); 
} 

function ShowProgress() {   
    if ($('#divajaxProgress').is(':visible') == false) { 
    $("#divajaxProgress").show(); 
    } 
} 

Вы можете увидеть изображение here

Пожалуйста, предложите мне, что здесь проблема.

+0

Показывать код расслоение плотной, пожалуйста. – Atber

+0

где ур ajax звонок? – mithunsatheesh

+0

@mithunsatheesh есть несколько вызовов ajax на моей странице, общий - это функция document.ready. – nrsharma

ответ

0

Вы можете попробовать что-то вроде следующего. Используя JQuery, вы можете изменить стиль отображения блоков. Это должно работать и в кросс-браузере.

function HideProgress() {     
    $("#divajaxProgress").css({ display: "none" }); 
} 

function ShowProgress() {     
    $("#divajaxProgress").css({ display: "inline" }); 
} 

Дайте мне знать, если это поможет.

+0

не его не работает. Еще один момент: я просто изменил тип изображения с .gif на .png, и он появляется там, но не как анимированный, то есть анимация, не работающая с .png-изображением. – nrsharma

1

попробуйте это вместо этого. Протестировано на хроме !!!

function HideProgress(){ 
    $('#divajaxProgress').css('display','none'); 
} 

function ShowProgress() {   

    if($('#divajaxProgress').css('display') == "none"){ 
     $("#divajaxProgress").show(); 
    } 
} 


    $.ajax({ 
     url: 'url here', 

     type: "post", 

     beforeSend: function() { 
      ShowProgress(); 
     }, 

     error: function(){ 
      HideProgress(); 
     }, 

     success: function (result) { 
      alert(result); 
      HideProgress(); 
     } 
    }) 

Это не может быть структура вашего AJAX, но убедитесь, что вы называете ShowProgress() в beforeSend и вызовите HideProgress() после успеха обратного вызова или ошибки обратного вызова.

+0

нет, он тоже не работает ... и, пожалуйста, см. Мой ответ в ответе выше. – nrsharma

+0

ну, я думаю, проблема не в том, чтобы показать или скрыть функцию. Проблема должна быть в вашем вызове ajax. Не могли бы вы использовать функцию ajax-кода, которую используете? Ваш вопрос не относится к контексту вашей проблемы. –

+0

Нет проблем с вызовами ajax. Попробуйте открыть изображение в хроме (из ссылки, которую я предоставил), и посмотрите с элементом проверки, вы найдете изображение там, но оно не отображается в хроме. Если вы откроете его в IE и Mozilla, вы можете увидеть изображение вместо этого. – nrsharma

5

Вы недавно изменили использование синхронного вызова Ajax?

асинхронный: ложные

Если да, то я видел этот вопрос с анимацией не обновляется. Большинство браузеров не получают контроль во время синхронного вызова ajax и не обновляют изображение. Однако каким-то образом Firefox обновлял изображение.

+0

нет, я не знаю. Но я считаю, что изображение работает до нескольких дней, а теперь оно не появляется только в Google Chrome. – nrsharma

+0

Нет проблем с вызовами ajax. Попробуйте открыть изображение в хроме (из ссылки, которую я предоставил), и посмотрите с элементом проверки, вы найдете изображение там, но оно не отображается в хроме. Если вы откроете его в IE и Mozilla, вы можете увидеть изображение вместо этого. – nrsharma

0

Ваше изображение повреждено. Он вообще не отображается в Chrome.

Если открыть файл в текстовом редакторе, вы увидите HTML форма прилагается:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head id="Head1"><title> 
    Untitled Page 
</title></head> 
<body> 
    <form name="form1" method="post" action="ViewFile.aspx?FileId=2473" id="form1"> 
<div> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGQ=" /> 
</div> 

    <div> 
    </div> 
    </form> 
</body> 
</html> 

Похоже, это была добавлена ​​по ошибке.

0

Попробуйте с: изменения или добавления async: true, в АЯКС секции вроде как following.it может работать ..

$.ajax({ 
     url: 'url here', 

     type: "post", 
     async: true, //for synchronize browser & server side. 

     beforeSend: function() { 
      ShowProgress(); 
     }, 

     error: function(){ 
      HideProgress(); 
     }, 

     success: function (result) { 
      alert(result); 
      HideProgress(); 
     } 
    }) 
0

Вместо Hidding Загрузчик успеха или ошибки. Скрыть его под полным состоянием АЯКС вызова

$.ajax({ 
 
     url: 'url here', 
 
     type: "post", 
 
     async: false, 
 
     beforeSend: function() { 
 
      ShowProgress(); 
 
     }, 
 
     complete: function() { 
 
      HideProgress(); 
 
     }, 
 
     success: function (result) { 
 
      alert(result);  
 
     }, 
 
     error: function(err){ 
 
      //Show error 
 
      alert(err); 
 
     } 
 
    });