延迟加载图像后启动javascript

我的javascript有问题。脚本使我的网站上的三个元素大小相同。我想通过延迟加载加载我的图片。这使得渲染不正确，因为元素的大小是由脚本计算的，而没有图像。是否可以为javascript提供一个函数，使其仅在通过lazy load成功加载图像后启动

<script type="text/javascript">
jQuery(document).ready(function($){
function kb_equal_height() {
  var highest_element = 0;

  // Delete the height
  $('.navigation-left,.site-content,.widget-area').each(function() {
    $(this).removeAttr('style');
  });

  // Check which element is highest
  $('.navigation-left,.site-content,.widget-area').each(function() {
    if ($(this).height() > highest_element) {
      highest_element = $(this).height();
    }
  });

  // Assign this height to all elements
  $('.navigation-left,.site-content,.widget-area').each(function() {
    $(this).height(highest_element);
  });
};

window.onload = kb_equal_height;

var resizeTimer;
$(window).resize(function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(kb_equal_height, 100);
});

});
</script>

jQuery（文档）.ready（函数（$）{
函数kb_等高（）{
var\u元素=0；
//删除高度
$（'.navigation left、.site content、.widget area'）。每个（函数（）{
$（this.removeAttr（'style'）；
});
//检查哪个元素最高
$（'.navigation left、.site content、.widget area'）。每个（函数（）{
if（$（this）.height（）>最高的元素）{
最高的_元素=$（this）.height（）；
}
});
//将此高度指定给所有图元
$（'.navigation left、.site content、.widget area'）。每个（函数（）{
$（此）.高度（最高的_元素）；
});
};
window.onload=kb\u等高；
var树脂定时器；
$（窗口）。调整大小（函数（）{
clearTimeout（resizeTimer）；
resizeTimer=设置超时（kb等于高度，100）；
});
});

您可以使用在图像加载完成时调用该函数

在这里，您可能看不到它的实际操作，因为图像可能不会花费足够长的时间来加载，以便您看到中间状态，但它可以工作

如果您想再次看到缓存的运行，您需要清理缓存，因为浏览器将在第二次、第三次从缓存加载图像。。。时代

让nbCat=0
让div=document.getElementById（“nbImg”）
from（document.getElementsByClassName（“doAction”）.forEach（img=>{
img.onload=imgLoaded//此处是您的函数
})
函数imgLoaded（e）{
nbCat++
div.textContent=nbCat+“cat”+（nbCat>1？“s”：“）+“已加载”
}

img{
最高高度：50vh
}

未加载cat

您可以尝试异步加载图像，并将其设置为

img

标记。此外，您可以为这些元素指定特定的类来定义维度。我认为您可以在

img

标记上使用，以便在每次加载图像时调用函数谢谢！我试图设置img标签，但我不明白。你能给我一个img标签上的.onload脚本的示例吗？