延迟加载图像后启动javascript

Question

我对javascript有问题。该脚本使我网站上的三个元素大小相同。我想通过延迟加载来加载图片。这使渲染不正确，因为元素的大小是由脚本计算的，没有图像。是否可以赋予javascript一个仅在通过延迟加载成功加载图像后才能启动的功能？

<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>

Answer 1

当图像加载完成后，您可以使用来调用函数

您可能不会真正在此处看到它的作用，因为图像加载所需的时间可能不会足够长，以使您可以看到中间状态，但是它可以正常工作

如果您想第二次看到缓存，则需要清理缓存，因为浏览器将第二次，第三次从缓存中加载图像

let nbCat = 0
let div = document.getElementById("nbImg")

Array.from(document.getElementsByClassName("doAction")).forEach(img => {
  img.onload = imgLoaded // your function here
})

function imgLoaded(e) {
  nbCat++
  div.textContent = nbCat + " cat" + (nbCat > 1? "s":"") + " loaded"
}

img {
  max-height: 50vh
}

<img class="doAction" src="https://r.hswstatic.com/w_907/gif/tesla-cat.jpg">
<img class="doAction" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg">
<img class="doAction" src="https://pre00.deviantart.net/5d96/th/pre/f/2012/103/d/d/dd0d35acf8ea1817dffe7677f018b5a4-d4vzsbg.jpg">
<img class="doAction" src="https://pre00.deviantart.net/758d/th/pre/f/2018/006/2/7/tigerfieldadjusted_by_mssylviarose-dbz65qt.jpg">
<div id="nbImg">no cat loaded</div>