AJax Loading Animation Script

Please I can't get this script to work

function Display_Load()
{
$("#loading").fadeIn(900,0);
$("#loading").html('<img src="../images/loadinganimation.gif" />');

}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slo开发者_如何转开发w');
};

//Pagination Click
$("#pagination-flickr li").click(function(){
Display_Load();
});

-------
<ul class="pagination-flickr">
<li>some data to click</li>
</ul>

<div id="loading"></div>

---

Your click handler is ref and id #pagination-flickr while your <ul/> is a class of .pagination-flickr

<ul class="pagination-flickr">
  <li>some data to click</li>
</ul>

$(".pagination-flickr li").click(function(){
  Display_Load();
});

Code example on jsfiddle.

---

Just a guess: you want the fade-in to start only after the image is available? Try this:

function Display_Load()
{
  var img = new Image();
  img.onload = function() {
    $("#loading").fadeIn(900);
    $("#loading").html('<img src="../images/loadinganimation.gif" />');
  };
  img.src = '../images/loadinganimation.gif';
}

If the issue is that you want the image to show up before the content is loaded, then the problem is that the call to "fadeIn" will cause the <div> to be made invisible before it's made visible. In other words, the first thing "fadeIn" does is to hide the element so that it can actually "fade in" to view.