在客户端计算机中加载实际图像时如何显示忙图像

Question

我将通过jquery调用我的服务器端方法，我的服务器端方法将只提供类似<img src='pop.gif' />

的html

从服务器端功能获取图像网址后，我只是将html推入我的div，但我想在客户端加载何时图像，然后我想显示一个忙碌的图像。所以我打算写下面的代码

第一个代码调用服务器端方法

$.ajax({
  url: 'image-map.aspx',
  data: {}, // the image url links up in our fake database
  dataType: 'html',
  success: function (html) {
    // because we're inside of the success function, we must refer
    // to the image as 'img' (defined originally), rather than 'this'

   var img = $(html);
   $(img).load(function() {
      //alert('Image Loaded');
   });
   $('#myidv').append(img);

  }
});

所以我只需要知道我的代码是好的。它是否有效以及如何显示微调器图像直到客户端的图像下载？

Answer 1

首先，你应该将img附加到onload函数中，如下所示：

$(img).load(function() {
    $('#mydiv').append(img);
});

这样，图像只会在加载后插入。

对于加载部分，有许多方法，但一种方法是将加载图像放在目标元素（#mydiv）中，并在附加新图像时同时删除该图像。像这样：

$.ajax({
    beforeSend: function() {
        $('#mydiv').append($(<img src="loading.gif" class="loading" />);
    },
    success: function(html) {
        var img = $(html);
        $(img).load(function() {
            $('#mydiv .loading').remove();
            $('#mydiv').append(img);
        });
    }
});