Question

现在我从IE中得到这种奇怪的行为，它没有显示我的动画gif。我试图在AJAX请求期间显示加载gif。

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>

Answer 1

这可能是因为您处理问题的方式。您正在使用fadeOut方法的回调函数来插入一些html。问题是，直到服务器完成向客户端提供页面之后才会插入。您可以插入图像标记，但IE不会加载该图像，因为它不知道它需要从服务器获取它。

更好的方法是将gif放入标记中。使用一些css来隐藏它，然后使用jquery fadeIn（）方法在你想要它时显示它，并使用fadeOut（）方法在需要时隐藏它。

在IE中使用jquery显示gif

1 个答案: