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的输出

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

在将所有图片添加到html之前，我怎么能等到我的所有图片都被加载？

1 个答案: