イメージをhtmlに追加する前にすべてのイメージがロードされるまで、どのように待つことができますか？

Question

私は、ajaxソースから複数の画像を取得しようとしており、すべての読み込みが終了したときにそのページに画像をロードしようとしています。私が抱えていた問題は、私が解決策を見つけようとした原因は、サーバー上にイメージが存在していてもイメージの一部が読み込まれていないことでした。

私は今、アレイ

design_images.push({cid:designImg}); 

に画像を追加するコードを追加しようとしました...そして、すべての画像が読み込まれているときに、ページにそれを追加しますが、私はできないだろうそれを働かせてください。

var counter = 0; 
$(design_images).load(function() { // many or just one image(w) inside body or any other container 
counter += 1; 

    }).each(function(key, value) { 
    this.complete && $(this).load();  
    console.log(value); 
}); 

何も.each

から出力されていないこれは、アレイの出力はdesign_images.lengthの

値がが0であるdesign_imagesあります。ここで

は完全な機能です：

function matte_design_change_design_type(element) 
{ 
    var element_value = null; 
    var mattes_selected_type = get_mattes_selected_type(); 

    matte_design_widths[mattes_selected_type] = []; 
    var mattes_selected_design = get_mattes_selected_design(); 
    var count_matte_designs = 0; 
    var found = false; 
    $(document).ready(function() 
    { 
    $.ajax(
    { 
     type: "GET", 
     url: SITE_URL + "/system/components/xml/" + mattes_selected_type, 
     dataType: 'xml', 
     success: function(xml) 
     { 
     var output = []; 
     var design_images = []; 

     $('component', xml).each(function(i, el) 
     { 
      matte_design_widths[mattes_selected_type][i] = 0; 
      count_matte_designs++; 
      var thumb = $("thumb", this).text(), 
       cid = $("cid", this).first().text(), 
       name = $("name", this).first().text().replace("Collage - ", ""), 
       alt = name, 
       description = $("description", this).first().text(), 

      if (parseInt(cid, 10) === mattes_selected_design) 
      { 
      found = true; 
      $("#matte_design_name").html(name); 
      $("#matte_design_description").html(description); 
      } 



      var designImg = new Image(); 
      designImg.id = 'cid_' + cid; 
      designImg.alt = alt; 
      designImg.onclick = function() { 
      matte_design_change(cid, mattes_selected_type); 
      }; 
      designImg.onload = function() { 
      output.push('<span class="matte_design_image_name" id="design_' + cid + '"><img id="cid_' + cid + '" />'); 
      output.push('<br /><span class="matte_design_name" id="matte_design_name_' + mattes_selected_type + '_' + i + '">' + name + '</span></span>'); 
      matte_design_increase_width(mattes_selected_type, this.width, i); 

      $('#matte_designs_strip_wrapper').html(output.join('')); 
      }; 
      designImg.src = 'https://example.com/system/components/compimg/' + thumb + '/flashthumb'; 

     }); 


     var counter = 0; 
     var size = $('img').length; 
     $(design_images).load(function() { 
      counter += 1; 

     }).each(function(key, value) { 
      this.complete && $(this).load();  
      console.log(value); 
     }); 
     } 
    }); 
    }); 
} 

私はwaitForImagesとimagesLoadedを試してみましたが、私は彼らが私のために動作させることができなかったが、私はどちらか一方を使用するのではなくていませんよ。すべてがロードされている場合

Answer 1

隠すチェックするCSS

img{ 
    display: none; 
    } 

使用のjQueryを使用して、デフォルトですべてのイメージは、このダウンは投票されたのはなぜ画像

jQueryの

$(window).load(function(){ 
    $('img').fadeIn(800); //or $('img').show('slow'); 
});