如何在客户端机器中加载实际图像时显示繁忙图像答案

【问题标题】：How to display busy image when actual image is loading in client machine如何在客户端机器中加载实际图像时显示繁忙图像
【发布时间】：2011-09-21 19:12:26
【问题描述】：

我将通过 jquery 调用我的服务器端方法，而我的服务器端方法将只给出一个像 <img src='pop.gif' /> 这样的 html

从服务器端函数获取图像 url 后，我只会将 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);

  }
});

所以我只需要知道我的代码没问题。它是否有效以及如何在客户端下载图像之前显示微调器图像？

【问题讨论】：

标签： jquery asp.net

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

【讨论】：