Question

当用户访问我网站的某个特定网站时，我正在加载大量图片。我有一个JSON文件，它有图像文件名和图像的其他相关信息，通过AJAX调用加载到用户。

步骤如下：

用户访问该页面并使用jQuery加载JSON
迭代JSON对象并获取每个图像的名称
使用jquery克隆HTML元素，设置每个cicle的图像数据并将图像元素附加到页面
使用名为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

如何通过AJAX加载通过JSON数据引用的图像？

1 个答案: