在客户端计算机中加载实际图像时如何显示繁忙图像 [英] How to display busy image when actual image is loading in client machine

问题描述

我将通过jquery调用我的服务器端方法，而我的服务器端方法将仅给出<img src='pop.gif' />

i am going to call my server side method by jquery and my server side method will just give a html like <img src='pop.gif' />

从服务器端函数获取图像url后，我将html推送到div中，但是我希望何时将图像加载到客户端，然后我要显示繁忙的图像.所以我打算写下面的代码

after getting the image url from server side function i will just push the html into my div but i want the when image will be loading at client side then i want to show a busy image. so i plan to write the code like below

$.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);

  }
});

所以我只需要知道我的代码是可以的.它有效吗?如何显示微调框图像，直到在客户端下载图像为止?

so i just need to know my code is ok. does it work and how to show spinner image till the image download at client side?

推荐答案

首先，应将img附加内容放在onload函数中，如下所示:

First of all, you should put the img appending inside the onload function like this:

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

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

This way the image will only be inserted after it's done loading.

对于加载部分，有很多方法，但是一种方法是将加载图像放置在目标元素(#mydiv)中，并在附加新图像时同时移除该图像.像这样:

For the loading part, there are many approaches, but one way is to put a loading image in the destination element (#mydiv), and remove that image at the same time when appending the new image. Something like this:

$.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);
        });
    }
});

这篇关于在客户端计算机中加载实际图像时如何显示繁忙图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！