Question

我正在构建一个ajax过滤器，它正在替换页面上的容器。在将内容附加到DOM之后，我需要预先处理新附加内容的每个块并获取其高度，然后将每个块设置为最大高度。这是一个棘手的部分。当附加内容时，图像没有被加载，所以我无法准确计算整个块的高度。这是我的代码。

 try {
  final String sql = "insert into colortable (string, color, cid) values (?,?,?)";
  final PreparedStatement ps = conn.prepareStatement(sql, new String[] {"ID"});
  ps.setString(1, "TEST1");
  ps.setString(2, "FFFFFF");
  ps.setInt(3, 1);
  ps.addBatch();
  ps.setString(1, "TEST2");
  ps.setString(2, "AAAAAA");
  ps.setInt(3, 1);
  ps.addBatch();
  ps.executeBatch();
  final ResultSet rst = ps.getGeneratedKeys();
  rst.getMetaData();
  if (rst != null){
    while (rst.next()) {
      final BigDecimal bigDecimal = rst.getBigDecimal(1);
      System.out.println(bigDecimal);
      Assert.notNull(bigDecimal);
    }
  }
  ps.close();
}catch (final SQLException e){
  System.out.println(e);
}finally {
}

一个有效的解决方案是在某些超时后运行adjustBoxHeights，但我不喜欢它。

Answer 1

如果您控制要附加到DOM中的HTML，则可以为图像元素指定一个公共类名，然后为属于该类的元素设置load事件回调。您可以在AJAX“成功”回调中执行此操作。

在随后的load事件处理程序中，您将获得相应父/祖先元素的height。

假设从AJAX调用进来的图像都属于img类，基本上就是这样：

$.ajax({
  ...
  success: function(html) {
    $('#product-pagination-container').html(html);
    
    // Now, that the DOM has been updated to inlcude the new images, we can 
    // find them in the DOM and set up a load event callback for each:
    Array.prototype.slice.call(document.querySelectorAll("img")).forEach(function(pic){
      // As each images finishes loading, adjust the box heights:
      pic.addEventListener("load", adjustBoxHeights);
    });
    

    //Sroll to products
    /*
        $('html,body').animate({
        scrollTop: $('#product-pagination-container').offset().top},
        'slow');
    */
  },
  error: function(err) {
    console.log(err.responseText);
  }
});

function adjustBoxHeights() {
  var maxHeight = 0;
  $('.product-grid > div, .content-top .product-layout > div, .content-bottom .product-layout > div').each(function(){
    $(this).height('auto');
    if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
  });
  $('.product-grid > div, .content-top .product-layout > div, .content-bottom .product-layout > div').each(function(){
    $(this).height(maxHeight);
  });
}

jQuery检测何时加载内容

1 个答案: