javascript - 如何检测通过 JSON 数据引用的图像何时使用 AJAX 加载？

Question

当用户访问我的网站的一个特定站点时，我会加载大量图像。我有一个 JSON 文件，其中包含图像文件名和图像的其他相关信息，该文件通过 AJAX 调用加载给用户。

步骤如下:

1. 用户访问页面并使用 jQuery 加载 JSON
2. 迭代 JSON 对象并获取每个图像的名称
3. 使用jQUery克隆一个HTML元素，设置每个cicle的图像数据并将图像元素附加到页面
4. 使用名为 Waterfall.js 的第三方库将加载的图像排列在网格布局中

问题是，加载 JSON 并将图像克隆到页面后，我不知道如何检测图像何时完成下载。此步骤对于 Waterfall 库正确创建网格布局至关重要。我正在尝试使用同一作者的另一个简单库来检测图像何时加载( imgStatus )，但我还没有弄清楚如何检测该事件。

我的JS代码如下:

/* step 1 */
var mJson = $.getJSON( '/static/json/somedata.json', function( mData ) {
  /* 
    some code goes here 
  */
  for( var m = 0; m < mData.length; ++m ) {
    var mTemplate = $( '.item-template .item' ).clone();
    $( mTemplate )
     .data( 'item-link', 'https://www.example.com/posts/' + mData[ m ].fblink )
     .find( '.item-image' ).attr( 'src', '/static/images/' + mData[ m ].image );
    $( mTemplate ).appendTo( '.items-grid' );        
  }
});

mJson.complete( function() {
  console.log( 'done json' );
  /* this is where I try to use imgStatus to detect when the images are loaded */
  imgStatus.watch( '.item-image', function( imgs ) {
    if( imgs.isDone() ) {
      /* when the images are loaded, I call waterfall to create the grid layout */
      waterfall( '.items-grid' );
    }
  });
});

HTML 是:

<section class="item-template hidden">
    <!-- this is the item template -->
    <div class="item" data-item-link="#">
        <img class="img-responsive item-image" src="#" />
        <div class="clearfix"></div>
    </div>
    <!-- end of item template -->
</section>

<section class="row">
    <div class="col-sm-12 items-grid">
         <!-- this is where the cloned items are inserted and the grid layout will be implemented -->            
    </div>
</section>

我知道这不是最有效的代码，我迫不及待地想用新版本替换所有内容，但这就是我现在必须处理的内容。有人可以帮我找到一种方法来检测图像何时完成下载吗？它可以带有或不带有 imgStatus 或使用其他库。谢谢。

Answer 1

This stackoverflow thread answer引导我:

在完整的处理程序中:

mJson.complete( function() {
  console.log( 'done json' );

  $(document).trigger('done-json');
});


/* Then you can do something like: */

$(document).on('done-json', function() {
  /* this is where I try to use imgStatus to detect when the images are loaded */
  imgStatus.watch( '.item-image', function( imgs ) {
    if( imgs.isDone() ) {
      /* when the images are loaded, I call waterfall to create the grid layout */
      waterfall( '.items-grid' );
    }
  });
});

如果上述方法不起作用:

/* step 1 */
var mJson = $.getJSON( '/static/json/somedata.json', function( mData ) {
  /* 
    some code goes here 
  */
  for( var m = 0; m < mData.length; ++m ) {
    var mTemplate = $( '.item-template .item' ).clone();
    $( mTemplate )
     .data( 'item-link', 'https://www.example.com/posts/' + mData[ m ].fblink )
     .find( '.item-image' ).attr( 'src', '/static/images/' + mData[ m ].image );
    $( mTemplate ).appendTo( '.items-grid' );
  }
  setTimeout(function() {
      $(document).trigger('done-appending-template');
  }, 1);
});

mJson.complete( function() {
  console.log( 'done json' );
});

$(document).on('done-appending-template', function() {
  /* this is where I try to use imgStatus to detect when the images are loaded */
  imgStatus.watch( '.item-image', function( imgs ) {
    if( imgs.isDone() ) {
      /* when the images are loaded, I call waterfall to create the grid layout */
      waterfall( '.items-grid' );
    }
  });
});

我还没有尝试过这个，但我认为它应该让你走上半正确的轨道(可能是一个更好的方法，但如果它有效......)看看你是否需要使用 setTimeout to 1ms trick或不。

此外，您可以尝试另一个库: https://github.com/desandro/imagesloaded