javascript - 如何显示正在加载的gif图像直到大图像加载完毕？

Question

我做错了什么？它不显示 gif。它不一定是 div

内任何图像的元素

   $('#loadbig a').each(function(index,el){

       //find this link's child image element
      var img = $(this).find('img');

      //hide the image and attach the load event handler
      $(img).hide().load(function () {

            //remove the link's "loading" classname
            $(el).removeClass('loading');

            //show the loaded image
            $(img).fadeIn();
      })
});

CSS:

#loadbig a.loading{
    background:url(images/loading.gif) no-repeat center center;
}

Answer 1

anchor 是一个内联元素，没有高度，因此背景图像不会显示。

最好将加载 gif 显示为图像本身并隐藏 onload

$('#loadbig a').each(function(index,el){

   //find this link's child image element
  var img = $(this).find('img.bigImage');
  var loading = $(this).find('img.loading');

  //hide the image and attach the load event handler
  $(img).hide().load(function () {

        //hide loading gif
        $(loading).hide();

        //show the loaded image
        $(img).fadeIn();
  })

});