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，而您的

是 .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”将导致

< /code> 在可见之前先使其不可见。换句话说，“fadeIn”所做的第一件事就是隐藏元素，以便它实际上可以“淡入”查看。