Почему сразу считается правильная высота блоков?

Question

[Андрей Никифоров]

Есть скрипт который мало-мальски заменяет Masonry, он просто считает высоту блоков при определенных разрешениях и отдает браузеру то что нужно, однако замечен баг, если перейти на страницу в первый раз - то он не проделывает вычисления, при повторном посещении страниц или клике на фото - срабатывает как нужно

Даю исходный сайт, т.к на кодепене почему-то все срабатывает, знаю что могут быть несовместимости, но как бы избежать их и наладить код не тратя уйму времени ?
Урл sbu-73.ru
sbu-73.ru/wp-content/themes/sbu/js/work.js

Answer 1

[fl3nkey]

Потому что вы считаете высоту до того, как изображение успевают загрузится. Во второй раз срабатывает потому что изображения берутся из кеша, и это происходит быстрее, чем выполнение скрипта.

Comments

[Андрей Никифоров]

ну так а решение то какое?

у меня функция вызывается после полной загрузки страницы

function resize() {
  var width_window = $(window).width();

  if(width_window>=1260) {
    var h_item_3 = $('.works .item:nth-child(3)').height();
    $('.works .item').height(h_item_3);
    var add_h_item_2 = (h_item_3*2)+30;
    $('.works .item:nth-child(2)').height(add_h_item_2);

    var h_item_2 = $('.works .item:nth-child(2)').height();
    var margin_item_2 = (h_item_2 + 30)/2;
    $('.works .item:nth-child(2)').css({
      'margin-bottom': -margin_item_2
    });    
  }

  if(width_window<=1259) {
    var h_item_3 = $('.works .item:nth-child(3)').width();
    $('.works .item').height(h_item_3);
    var add_h_item_2 = (h_item_3*2)+20;
    $('.works .item:nth-child(2)').height(add_h_item_2-10);

    var h_item_2 = $('.works .item:nth-child(2)').height();
    var margin_item_2 = (h_item_2 + 10)/2;
    $('.works .item:nth-child(2)').css({
      'margin-bottom': -margin_item_2
    });    
  }

  if(width_window<=736) {
    var h_item_3 = $('.works .item:nth-child(3)').width();
    $('.works .item').height(h_item_3-100);
    var add_h_item_2 = h_item_3-100;
    $('.works .item:nth-child(2)').height(add_h_item_2);

    var h_item_2 = $('.works .item:nth-child(2)').height();
    $('.works .item:nth-child(2)').css({
      'margin-bottom': 0
    });    
  }

}


$(document).ready(function(){
  resize();
});

[Андрей Никифоров]

решил

$(window).load(function() {

оказывается '$(document).ready не включает картинки в DOM

[fl3nkey]

Андрей Никифоров, я дал пищу для размышления, этого вам не достаточно?
"Хочешь помочь человеку – дай ему не рыбу а удочку".