Javascript jQuery在加载内容时检测

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

$.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);
  });
}

$.ajax({
...
成功：函数（html）{
$（“#产品分页容器”）.html（html）；
调整高度（）；
//向产品推销
/*
$（'html，body'）。设置动画({
scrollTop:$（“#产品分页容器”）.offset（）.top}，
“慢”）；
*/
},
错误：函数（err）{
console.log（err.responseText）；
}
});
功能调整BoxHeights（）{
var maxHeight=0；
$（'.product grid>div，.content top.product layout>div，.content bottom.product layout>div'）。每个（函数（）{
$（this.height（'auto'）；
如果（maxHeight<$（this.height（））{maxHeight=$（this.height（）}
});
$（'.product grid>div，.content top.product layout>div，.content bottom.product layout>div'）。每个（函数（）{
$（此）.height（最大高度）；
});
}

---

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

如果您控制要附加到DOM中的HTML，您可以为图像元素指定一个公共类名，然后为属于该类的元素设置一个

加载

事件回调。您可以在AJAX“success”回调中执行此操作

在随后的

load

事件处理程序中，您将获得相应父/祖先元素的

高度

假设来自AJAX调用的图像都属于
img
类，那么基本上是这样的：


$.ajax({
...
成功：函数（html）{
$（“#产品分页容器”）.html（html）；
//现在，DOM已经更新为包含新图像，我们可以
//在DOM中找到它们，并为它们设置加载事件回调：
Array.prototype.slice.call（document.queryselectoral（“img”））.forEach（函数（pic）{
//在每个图像完成加载后，调整长方体高度：
图.添加的列表器（“加载”，调整箱高）；
});
//向产品推销
/*
$（'html，body'）。设置动画({
scrollTop:$（“#产品分页容器”）.offset（）.top}，
“慢”）；
*/
},
错误：函数（err）{
console.log（err.responseText）；
}
});
功能调整BoxHeights（）{
var maxHeight=0；
$（'.product grid>div，.content top.product layout>div，.content bottom.product layout>div'）。每个（函数（）{
$（this.height（'auto'）；
如果（maxHeight<$（this.height（））{maxHeight=$（this.height（）}
});
$（'.product grid>div，.content top.product layout>div，.content bottom.product layout>div'）。每个（函数（）{
$（此）.height（最大高度）；
});
}
如果您控制要附加到DOM中的HTML，则可以为图像元素指定一个公共类名，然后为属于该类的元素设置一个
加载
事件回调。您可以在AJAX“success”回调中执行此操作

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

假设来自AJAX调用的图像都属于
img
类，那么基本上是这样的：


$.ajax({
...
成功：函数（html）{
$（“#产品分页容器”）.html（html）；
//现在，DOM已经更新为包含新图像，我们可以
//在DOM中找到它们，并为它们设置加载事件回调：
Array.prototype.slice.call（document.queryselectoral（“img”））.forEach（函数（pic）{
//在每个图像完成加载后，调整长方体高度：
图.添加的列表器（“加载”，调整箱高）；
});
//向产品推销
/*
$（'html，body'）。设置动画({
scrollTop:$（“#产品分页容器”）.offset（）.top}，
“慢”）；
*/
},
错误：函数（err）{
console.log（err.responseText）；
}
});
功能调整BoxHeights（）{
var maxHeight=0；
$（'.product grid>div，.content top.product layout>div，.content bottom.product layout>div'）。每个（函数（）{
$（this.height（'auto'）；
如果（maxHeight<$（this.height（））{maxHeight=$（this.height（）}
});
$（'.product grid>div，.content top.product layout>div，.content bottom.product layout>div'）。每个（函数（）{
$（此）.height（最大高度）；
});
}
在tot secs超时后执行此操作您查看了Promise objects吗？@MarcoSalerno这永远不是一个可靠的解决方案，因为服务器上的更改可能会使映像不可用，无论您等待多长时间或网络速度的变化都可能导致为延迟选择的时间不正确。在这种情况下，它们永远不会load@MarcoSalerno在我提到的第二个案例中没有。在这种情况下，在加载映像之前会出现一个固定的超时。在超时tot secsHave之后执行此操作您查看了Promise objects吗？@MarcoSalerno这永远都不是一个可靠的解决方案，因为服务器上的更改可能会使映像不可用，无论您等待多长时间或网络速度的变化都可能导致为延迟选择的时间不正确。在这种情况下，它们永远不会load@MarcoSalerno在我提到的第二个案例中没有。在这种情况下，在加载映像之前会出现一个固定的超时。我这样做了，但使用了jQuery。我这样做了，但使用了jQuery。