javascript - jQuery 检测内容何时加载

Question

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

$.ajax({
  ...
  success: function(html) {
    $('#product-pagination-container').html(html);
    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);
  });
}

一个可行的解决方案是在一定的超时后运行 adjustmentBoxHeights，但我不喜欢它。

Answer 1

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

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

假设从 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);
  });
}