如何在大图像加载之前显示加载 gif 图像？答案

【问题标题】：How to display loading gif image until the big image have loaded?如何在大图像加载之前显示加载 gif 图像？
【发布时间】：2015-07-23 19:06:48
【问题描述】：

我做错了什么？它没有显示 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;
}

【问题讨论】：

如果图像已经加载，load 事件将不会被触发

标签： javascript jquery css loader

【解决方案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();
  })

});

【讨论】：