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

我将通过jquery调用我的服务器端方法，我的服务器端方法只会给出一个像的html

从服务器端function获取图像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); } }); 

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

Answer 1

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

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

这样，只有在完成加载后才会插入图像。

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

 $.ajax({ beforeSend: function() { $('#mydiv').append($(); }, success: function(html) { var img = $(html); $(img).load(function() { $('#mydiv .loading').remove(); $('#mydiv').append(img); }); } });