最初の画像がロードされていません

Question

私は画像のアップロード手順が成功したときに呼び出される次のコードスニペットを持っています。

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

ここで$avatarはイメージタグのコンテナです。考え方は、data.urlが正常に読み込まれるまでloading.gifでこのイメージを読み込むことです。ここではdata.urlには大きな画像が含まれており、読み込みに時間がかかります。誰かが私にいくつかの異なるアプローチを提案することができますではなく、setTimeOutを使用する

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

：私はとしてsetTimeOutを使用するまで

問題がloading.gifでは、イメージコンテナにロードされることはありませんか？

Answer 1

アップロードされた画像を表示することは、loaderを表示することよりも重要です。しかし、あなたがそれをやっているなら、onload-eventに行ってください。

loaderイメージに失敗した場合は、onerrorイベントを聴くか、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

私はあなたが非同期で