AJax Загрузка анимационного скрипта

Question

Пожалуйста, я не могу заставить этот скрипт работать

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

}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};

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

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

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

Answer 1

Ваш обработчик кликов ref и id #pagination-flickr, в то время как ваш <ul/> является классом .pagination-flickr

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

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

Пример кода на jsfiddle .

Answer 2

Просто предположение: вы хотите, чтобы появление началось только после того, как изображение стало доступно?Попробуйте это:

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

Если проблема в том, что вы хотите, чтобы изображение отображалось до загрузки контента, то проблема в том, что вызов "fadeIn" вызовет<div> сделать невидимым до того, как он станет видимым.Другими словами, первое, что делает «fadeIn» - это скрывает элемент, чтобы он мог «исчезнуть» для просмотра.