延迟加载图像后开始 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

您可以使用image.onload在图片加载完成后调用该函数

您可能不会真正在此处看到它的实际效果，因为图像可能不会花费足够长的时间来加载以供您查看中间状态，但它确实有效

如果你想第二次看到它的运行，你需要清理你的缓存，因为你的浏览器会在第二次、第三次...时从缓存中加载图像

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>

延迟加载图像后开始 javascript

Start javascript after lazy load images

javascript

load

element

function

lazy-evaluation