Izotopy jQuery przy pierwszym ładowaniu nie działają, Jak mogę czekać na załadowanie wszystkich zasobów/obrazów?

Question

Mam coś I już ułożyła jQuery izotop tutaj .. http://jsbin.com/eziqeq/6/edit

wydaje się działać w ogóle, ale na pierwszym obciążeniu nowej karcie, jest plugin Izotop ustalaniu wysokości elementu otoki do 0. Jeśli odświeżam stronę, to działa i ustawia wysokość elementu nadrzędnego na podstawie elementów znalezionych w środku.

Każda pomoc zostanie bardzo doceniona. Nie mogę myśleć, dlaczego z tego pierwszego obciążenia to nie działa, a po kolejnych przeładowaniach jest ... chyba że jest to coś związanego z buforowaniem obrazów, które ładuje?

EDIT--

Jest to kwestia buforowanie w przeglądarkach WebKit jak to działa na Firefox i na karcie pracy, kiedy wyczyścić pamięć podręczną i odśwież stronę to nie zadziała, dopóki odświeżane ponownie.

Answer 1

Musisz użyć wtyczki imagesLoaded w chrome. Zaczekaj, aż wszystkie obrazy zostaną załadowane przed inicjalizacją izotopu.

Answer 2

Możesz użyć wtyczki zgodnie z sugestią mkoryak.

lub można użyć następujących: (nie wymaga wtyczki - jQuery tylko):

// jQuery - Wait until images (and other resources) are loaded 
$(window).load(function(){ 
    // All images, css style sheets and external resources are loaded! 
    alert('All resources have loaded'); 
}); 

Stosując powyższą metodę, można być również pewni, że wszystkie CSS arkusze stylów są ładowane, jak również (do upewnij się, że twoja strona jest wyświetlana poprawnie po kopnięciu isotope).

"DOM ready" uruchamia się, gdy DOM jest gotowy (tj. Znacznik).

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

"Window load" czeka na wszystkich zasobów, a następnie pożary.

$(window).load(function(){ ... }); 

Uwaga: (przez @DACrosby): load() nie zawsze zadziała, jeśli zdjęcia są buforowane (czyli nie są one obecnie ładowane z witryny - używasz twoja lokalna kopia).

Answer 3

Uwaga:
1.you powinien zadzwonić izo-top funkcji wewnątrz windwo przypadku obciążenia (będzie czekać na środki do załadowania) również można nazwać funkcji w stopce.

2. Potwierdź wywołanie funkcji po załadowaniu css.

$(window).load(function(){ 
    $('.iso').isotope({ 
    // options 
    itemSelector: '.item', 
    layoutMode: 'masonry' 
    }); 
    }); 

również użyć obrazu wtyczki preloader do zdjęć ładuje pierwszy
http://www.createjs.com/#!/PreloadJS

Answer 4

Nie ma innej opcji, aby rozwiązać ten problem. Musisz użyć innego js, ​​jeśli twój grid-item zawiera dowolny image.poniżej link js jest

<script src='http://imagesloaded.desandro.com/imagesloaded.pkgd.js'></script> 

Wtedy nazywają ten zastępczy js poniżej:

/*=============Code for Masonry Gallery ==============*/ 
    var grid = document.querySelector('.grid'); 
    var jQuerygrid = jQuery('.grid').isotope({ 
     itemSelector: '.element-item' 
    }); 
    var iso = jQuerygrid.data('isotope'); 
    jQuerygrid.isotope('reveal', iso.items); 

    imagesLoaded(grid, function(){ 
     iso.layout(); 
    }); 

można uzyskać pełne i wyraźne szczegóły z oficjalnej strony Isotop użytkownika. link