Галерея изображений изотопов после загруженных изображений

Question

Я попытался найти и посмотреть, есть ли что-то перечисленное в этом списке, но я ничего не видел. У меня есть галерея, которая выложена с использованием Isotope, и она работает нормально, но пока страница загружается, изображения в галерее отображаются в середине страницы, а затем после их загрузки переходят в соответствующие позиции.

Я пытаюсь определить способ скрыть контейнер, пока изображения не появятся в их пятнах, а затем исчезнет с помощью $ container.fadeIn (1000);

Я просто не знаю, как вызвать эту функцию после их загрузки. Я пробовал использовать Document.ready несколько мест и не могу заставить его реагировать правильно.

<script> 
$(function(){ 

    var $container = $('#container'); 

    $container.imagesLoaded(function(){ 
    $container.isotope({ 
     layoutMode : 'fitRows', 
     itemSelector : '.photo' 
    }); 

    }); 

$container.fadeIn(1000); 

}); 

Этот вид работ, но это на самом деле не прослушивает изображения, которые будут полностью загружены еще.

Answer 1

Автор плагина explains it on GitHub. На самом деле это довольно просто. Просто добавьте fadeIn прямо перед началом изотопной галереи.

var $container = $('#container'); 

$container.imagesLoaded(function(){ 
    $container.fadeIn(1000).isotope({ 
    layoutMode : 'fitRows', 
    itemSelector : '.photo' 
    }); 
});