如何在等待所有图像加载到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); 
}); 

没有从。每个

输出这是阵列的输出design_images

design_images.length的值是0，但。

下面是完整的功能：

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