Запустите JavaScript после ленивой загрузки изображений - PullRequest
Новая
       31

Запустите JavaScript после ленивой загрузки изображений

0 голосов
/ 03 сентября 2018

У меня проблема с 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>

1 Ответ

0 голосов
/ 04 сентября 2018

Вы можете использовать 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>
...