由ajax加载的fadein图像

i use this ajax code for show selection image

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();
}   

when user click on thumbnail first loading.gif show and so big image show in in-t id . but i want first complete load image and so show . i found jquery load function but i dont know how use it ???

It would be better if you use jquery in your code. Include the following line in your header

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

and rewrite the function get_image as below

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);
    }
   });
   }