어떻게 기다릴 수 있습니까?

Question

나는 아약스 소스에서 여러 이미지를 얻을 그들은 모두 완성 로딩이있을 때 페이지에서로드하려합니다. 내가 그 있고 있었다 문제는 해결책이 이미지의 일부는 그 이미지가 서버에 존재에도 불구하고로드되지 않았 음을했다 찾으려고 나 발생했습니다.

는 이제 배열에로드 된 모든 이미지는 페이지가 추가됩니다 다음

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

것도이 어레이의 출력이 값 design_images.length 비록 0

을 design_images 인 .each

로부터 출력되지 않는다.

여기에 전체 기능입니다 :

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'); 
});