如何显示加载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

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

最好将加载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();
  })

});