Отображение gif с использованием jquery в IE - PullRequest
2 голосов
/ 09 сентября 2010

Прямо сейчас я получаю это странное поведение от IE, где он не показывает мой анимированный GIF.Я пытаюсь показать загрузочный GIF во время запроса AJAX.

function changeToRecorded(){
  $('#entries').fadeOut(200,function(){
    $('#main').html('<img id="loadingGif" class="centered" src="./pictures/ajax-loader.gif"; />');
    $.get("getData.php",{ status: "R" },requestCompleteRecorded);
  });
}

changeToRecorded вызывается по щелчку мыши на конкретном.В течение этого времени (в IE) загрузочный gif вообще не отображается в.Я не уверен, имеет ли это отношение к использованию fadeOut, но я не понимаю, почему это так, потому что он вызывается только после анимации.Это не то, как тег написан, потому что я скопировал и вставил этот тег в тело HTML-документа, и он отлично отображается в IE.

Если кто-нибудь знает, почему это происходит, я быцените это.

Примечание. Это работает практически для любого другого браузера в мире.

<html>
<head>
  <link rel="stylesheet" href="themeSuggestion.css">
  <script type="text/javascript" src="jQuery/jquery.js"></script>
  <script type="text/javascript">
    $(document).ready(onDocumentReady);

    function onDocumentReady(){
      $('#Recorded').addClass('border').click(changeToRecorded);
      $('#Pending').addClass('border').click(changeToPending);
      $('#main').addClass('scroll');
      $('#entries').addClass('main');
      $('#loadingGif').hide();
    }

    function changeToRecorded(){
      /*
      $('#entries').fadeOut(30,function(){
        $('#loadingGif').show();
        $.get("getData.php",{ status: "R" },requestCompleteRecorded);
      });
      */

      $('#entries').html('');
      $('#loadingGif').show();
      $.get("getData.php",{ status: "R" },requestCompleteRecorded);
    }

    function changeToPending(){
     /*
     $('#entries').fadeOut(30,function(){
        $('#loadingGif').show();
        $.get("getData.php",{ status: "P" },requestCompletePending);
      });
      */
      $('#entries').html('');
      $('#loadingGif').show();
      $.get("getData.php",{ status: "P" },requestCompletePending);
    }

    function requestCompletePending(data){
      $('#loadingGif').hide();
      $('#entries').addClass('main');
      $('#entries').html(data).fadeIn();
      $('#theme').addClass('fixws');
      $('#date').addClass('fixws');
    }

    function requestCompleteRecorded(data){
      $('#loadingGif').hide();
      $('#entries').addClass('main');
      $('#entries').html(data).fadeIn();
    }

  </script>
</head>

<body>
<div id="Recorded">Recorded</div><div id="Pending">Pending</div>
<br/><br/>
<div id="main">
  <img id="loadingGif" class="centered" src="./pictures/ajax-loader.gif"; />
  <table id="entries"></table>
</div>
</body>
</html>

1 Ответ

1 голос
/ 09 сентября 2010

Это может быть связано с тем, как вы подошли к проблеме. Вы используете функцию обратного вызова метода fadeOut для вставки html. Проблема в том, что он не вставляется до тех пор, пока сервер не завершит передачу страницы клиенту. Вы можете вставить тег изображения, но IE не загружает это изображение, потому что он не знает, что ему нужно получить его с сервера.

Лучше было бы поместить gif в вашу разметку. Используйте некоторые CSS, чтобы скрыть это, затем используйте метод jquery fadeIn (), чтобы показать его, когда вы хотите, чтобы он был видим, и метод fadeOut (), чтобы скрыть его, когда вам нужно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...