php - ajax加载的淡入淡出图像

Question

我使用这个 ajax 代码来显示选择图像

function get_image(id)
{
var getid=id;
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("in-t").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","<?php echo get_template_directory_uri(); ?>/class/class.image.php?id=" + getid + "&tnow="+ (new Date()).getTime(),true);
xmlhttp.send();
}   

当用户单击缩略图时，首先加载.gif 显示，然后在 in-t id 中显示大图像。但我想先完整加载图像，然后再显示。我找到了 jquery 加载功能，但我不知道如何使用它？？？

Answer 1

如果在代码中使用 jquery 会更好。在标题中包含以下行

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

并重写函数 get_image 如下

function get_image(id) {
  var getid=id;
  $("#idOfResultDiv").html('<img src="yourloading.gif" />');
  $.ajax({
    type: 'GET',
    async: false,
    url: '<?php echo get_template_directory_uri(); ?>/class
      /class.image.php?id=' + getid + '&tnow='+ (new Date()).getTime(),true,
    data: str,
    success: function(response) {
        $("#idOfResultDiv").html(response);
    }
   });
   }