Изображения изотопов перекрываются

Question

У меня проблема с изотопом. Я использую его для фильтруемой галереи, но иногда (не все время) некоторые изображения перекрываются.

http://www.rivka-photography.com/work/

Это не происходит каждый раз, вы, возможно, придется обновить страницу, чтобы увидеть проблему. И пока я только видел это в Safari (последняя версия) на Mac. Я использую imagesLoaded, но этого недостаточно или так кажется. Я пробовал как прогрессивную компоновку, так и ожидал загрузки всех изображений. Это мой текущий код JS:

jQuery(document).ready(function ($) { 
    var $grid = $('.gallery-isotope').isotope({ 
     itemSelector: '.gallery-item', 
     layoutMode: 'masonry' 
    }); 

    $grid.imagesLoaded().progress(function() { 
     $grid.isotope('layout'); 
    }); 
}); 

BTW это сайт Wordpress. Спасибо всем, кто может помочь.

Answer 1

Попробуйте с setTimeout().

jQuery(document).ready(function ($) { 
 
    var $grid = $('.gallery-isotope').isotope({ 
 
     itemSelector: '.gallery-item', 
 
     layoutMode: 'masonry' 
 
    }); 
 

 
    $grid.imagesLoaded().progress(function() { 
 
     setTimeout(function(){ 
 
     $grid.isotope('layout'); 
 
     },200); 
 
    }); 
 
});

Answer 2

Вы пробовали их предложили установку альтернативного (http://isotope.metafizzy.co/layout.html#imagesloaded):

var $grid = $('.gallery-isotope').imagesLoaded(function() { 
    // init Isotope after all images have loaded 
    $grid.isotope({ 
     itemSelector: '.gallery-item', 
     layoutMode: 'masonry' 
    }); 
}); 

Answer 3

Так что я думаю, что я понял это. Я уверен, что проблема возникла благодаря новой функции изменения размера Wordpress (представленной в 4.4). Я изменил код галереи, чтобы получить контроль над тем, какой размер изображения был выведен, и теперь он работает.