如何显示加载的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();
  })

});