Question

我有以下代码片段，在图像上传程序成功时调用。

success(data){
      $avatar.attr('src', "/images/common/loading.gif");
      $avatar.attr('src',  data.url);
}

此处$avatar是图片代码的容器。我们的想法是使用loading.gif加载此图片，直到data.url成功加载。此处data.url可能包含大尺寸图片，需要很长时间才能加载。

问题是loading.gif从未加载到图像容器，直到我使用setTimeOut为止：

success(data){
      $avatar.attr('src', "/images/common/loading.gif");
      setTimeOut(function(){
            $avatar.attr('src', data.url);
      },100);
}

有人可以建议我使用某种不同的方法，而不是使用setTimeOut吗？

Answer 1

显示上传的图片比显示loader图片更重要但是如果按照自己的方式进行，请使用onload-event。

如果onerror图片失败，请同时收听loader事件，否则avatar图片永远不会被加载！

success(data) {
  var loader = new Image();
  var loadMainImage = function() {
    var mainImage = new Image();
    mainImage.onload = function() { //avatar is loaded!
      $avatar.attr('src', this.src);
    }
    mainImage.src = data.url;
  }
  loader.onload = function() { //loader is loaded!
    $avatar.attr('src', this.src);
    loadMainImage();
  };
  loader.onerror = mainImage; //loader is failed!
  loader.src = "/images/common/loading.gif";
}

Answer 2

我认为您可以使用beforeSend 来处理异步承诺

第一张图片未加载

2 个答案: