Obrazy kamieniarskie/izotopowe/opakowaniowe Załadowane + czcionki sieciowe

Używam Packery.js [http://packery.metafizzy.co/] w witrynie i mam kilka problemów z układem podczas ładowania strony. Przyjrzałem się dokumentacji dla Masonry, Isotope i Packery (wszystkie bardzo podobne wtyczki, wszystkie opracowane przez Davida DeSandro) i omawia problemy adresowania, w których układ powinien być uruchamiany po załadowaniu wszystkich obrazów, jak również w przypadku wszystkich webfontów.Obrazy kamieniarskie/izotopowe/opakowaniowe Załadowane + czcionki sieciowe

http://packery.metafizzy.co/appendix.html

mam Packery działa dobrze z imagesLoaded ... ale nie jestem pewien, jak związać w ładowarce Google Web Font z tym. Poniżej znajduje się mój kod do ładowania czcionek, a następnie obrazyLoaded Packery Layout. Jeśli ktokolwiek mógłby zasugerować sposób na wywołanie ognia Packery po obu stronach Czcionek internetowych i obrazów Załadowany, byłbym na zawsze wdzięczny.

// before <body> 
<script type="text/javascript"> 
WebFontConfig = { 
    google: { 
     families: [ 'Bitter:400,700,400italic:latin' ] 
    }, 
    typekit: { 
     id: // hidden for obvious reasons 
    } 
}; 
(function() { 
    var wf = document.createElement('script'); 
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; 
    wf.type = 'text/javascript'; 
    wf.async = 'true'; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(wf, s); 
})(); 
</script> 

// after </body> 
// jquery and plugins are loaded prior to the following code 
jQuery(document).ready(function($) { 

    var $container = $('section.home-page main'); 

    imagesLoaded($container, function() { 

     $container.packery({ 
      itemSelector: 'article', 
      columnWidth: '.grid-sizer', 
      gutter: '.gutter-sizer' 
     }); 

    }); 

});

Źródło

2013-08-01 beefchimi

O człowieku. Uderzając głową o ścianę tym problemem. Dokumentacja jest zagmatwana i nic, co próbowałem, nie działa. –

możesz ustawić przykład na jsfiddle? –

Chodzi przede wszystkim o stworzenie najlepszy algorytm do rozwiązywania problemów, a to wymaga solidnej analizy problemu, a następnie znalezienie wszystkich możliwych rozwiązań, a wreszcie zastosować najlepsze rozwiązanie.

Problem:

Tworzenie Masonry wpływ na swojej stronie, która zależy od obciążenia poszczególnych elementów niepowiązanych (Czcionki Webfonts i obrazów), lub w innych warunkach, które zależy od asynchronicznego ładowanie niepowiązanych elementów strony.

Możliwe Algorytmy:

załadować pozycja (webfont lub zdjęcia na początku), a na obciążenia sukcesu pierwszej pozycji, zacznij ładować inne
używać flag, i wywoływać asynchronicznie obie funkcje ładowania, na podstawie zwróconych flag, programista może zdecydować, co zrobić.

Pierwszy algorytm jest nie tak na pewno

Jak w rozmowie serii jeśli jedno połączenie nie powiedzie się z jakiegokolwiek powodu, reszta połączeń nie odbędzie się, ponieważ zależy to od innego obciążenia poz oddzwonić.
Czas potrzebny do załadowania przedmiotu będzie dłuższy, ponieważ zdarzenia odbywają się w sposób szeregowy, a nie w sposób równoległy.

Drugi algorytm wydaje się OK

rozwiązanie:

Odnosząc się do obu docs dla webfontloader, imagesLoaded

utworzyć dwie zmienne flag

var imagesAreLoaded = false , fontsAreLoaded = false
ustawić każdą flagę prawda o udanym zwrotnego dla przypadku obciążenia

dla webfontloader jeśli chcesz nadać najwyższy priorytet czcionkę, która będzie używane tylko w twojej wtyczce packery, powinieneś użyć fontactive, jeśli wtyczka zależy od więcej niż jednej rodziny, lepiej użyj active:

WebFontConfig = { 
    active: function() { // set fontsAreLoaded to true here }, 
    fontactive: function(familyName, fvd) { // set fontsAreLoaded to true here } 
};

WebFontConfig jest przedmiotem przechodzą do webfontloader load metody.

Czy takie same dla imagesLoaded imprezy

$ ('# kontener'). ImagesLoaded()
.done (function (instance) {// Ustawienie imagesAreLoaded do prawda tutaj })

należy pamiętać, że wtyczki imagesLoaded jQuery zwraca obiekt jQuery odroczony. Dzięki temu można używać .always(), .done(), .fail() i .progress(), podobnie jak emitowane zdarzenia.

Zwykle wszystko powinno działać poprawnie, a zwykle czcionki będą ładować się przed obrazami, ale dobry programista powinien obsłużyć wszystkie możliwe scenariusze.

$ (document) .load (function() {//
jeśli obie flagi są prawdziwe, iść do przodu i załadować murarskich. // else if albo flag jest fałszywa, pokaż ostrzeżenie, ponawiania loading lub cokolwiek myślisz jest lepiej })

Uwaga: Moja odpowiedź naprawdę nie zapewniają dużo kodowania, bo z tego, co myślę, że oba dokumenty dla wtyczki są bardzo jasne, ale myślę, że problemem było jak poradzić sobie z problemem przy użyciu prawidłowego algorytmu.

Źródło

2015-03-17 04:32:34 ProllyGeek

Doskonała odpowiedź @ProllyGeek, bardzo dobrze wyjaśnione. Ciężko mi jest wybrać "poprawną" odpowiedź, ponieważ Dennis opiera się na załamaniu problemu i dostarcza kod. Chcę nagrodzić was oboje ... – beefchimi

@beefchimi dziękuję za twój miły komentarz :), chcę tylko powiedzieć im zawsze po pytaniach z 0 odpowiedziami lub nie jasnymi odpowiedziami, tylko po to, aby pomóc każdemu, kto nie otrzymał właściwej pomocy, kiedy ja pierwszy doszliśmy do tego, była tylko odpowiedź chuck, i nie było to jasne, a także zostało zbudowane na rozwiązaniu typu szeregowego, które jest całkowicie nieprawidłowe, widzę, że ludzie edytowali swoje odpowiedzi i dodali nowe odpowiedzi inspirowane moją odpowiedzią, tak czy inaczej, to naprawdę nie ma znaczenia, kto zasługuje na nagrodę, co jest ważne, że jestem szczęśliwy, że mogę pomóc, a ludzie wierzą, że mogę podać bardzo dobrze wyjaśnioną odpowiedź, okrzyki :) – ProllyGeek

To jest tylko odrobinę bardziej "asynchroniczny" niż druga wymieniona wersja tutaj. Obrazy są ładowane automatycznie przez przeglądarkę, nie czekają na wywołanie "ImagesLoaded". To samo dotyczy czcionek. Czas obu wersji będzie więc prawie identyczny we wszystkich sytuacjach. –

To działa idealnie.

<script> 
    function loadIsotope(){ 
     var $container = $('section.home-page main'); 

     imagesLoaded($container, function() { 

      $container.packery({ 
       itemSelector: 'article', 
       columnWidth: '.grid-sizer', 
       gutter: '.gutter-sizer' 
      }); 
     }); 
    } 

    WebFont.load({ 
    google: { 
     families: ['Bitter'] 
    }, 
    active: function() { 
     // This event is triggered when the fonts have rendered. 
     loadIsotope(); 
    }, 
    inactive:function(){ 
     // This event is triggered when the browser does not support 
     // linked fonts or if none of the fonts could be loaded. 
     loadIsotope(); 
    } 
    }); 
</script>

Źródło

2015-03-11 12:53:51

dobrze zrobione @Chuck! Dzięki za rozpalenie tej dyskusji;) – beefchimi

dobra edycja, teraz ma to więcej sensu, +1 do korekty. – ProllyGeek

Tak jak powiedział ProllyGeek, rozwiązanie asynchroniczne jest bardziej uzasadnione.Kod może wyglądać mniej więcej tak (ja testowałem - działa):

<script> 
var loadedImages = false; 
var loadedFonts = false; 

function loadedEverything() { 
     return (loadedImages && loadedFonts); 
} 

function loadMasonry() { 
     console.log("Loading masonry"); 
} 

WebFontConfig = { 
     google: { 
       families: ['Droid Sans'] 
     }, 
     active: function() { 
       loadedFonts = true; 
       if (loadedEverything()) loadMasonry(); 
     } 
}; 

imagesLoaded(document.querySelector('.container'), function(instance) { 
     loadedImages = true; 
     if (loadedEverything()) loadMasonry(); 
}); 
</script>

Niezależnie od obciążenia wolniejsze będzie ognia zdarzenie trzeba.

Źródło

2015-03-17 09:12:03

Dziękuję bardzo za wykonanie tego @Dennis Mysenko! EDYCJA: Zarówno ty, jak i ProllyGeek zasługują na zwycięską odpowiedź, a ja pierwotnie dałem ci ją za dostarczenie kodu, ale ponownie rozważyłem i przekażę go ProllyGeekowi za wyjaśnienie problemu i jak go rozwiązać. – beefchimi

@beefchimi Zapraszamy! :) Ale na ile widzę - jego odpowiedź jest wybrana jako zaakceptowana, nie moja? :-) –

Dang próbował edytować mój komentarz, ale zabrakło mu czasu. Pierwotnie dałem ci go za dostarczenie kodu, ale ponownie się zastanowiłem i przyznałem go ProllyGeek. Stackoverflow zachęca do "szczegółowej odpowiedzi kanonicznej, która jest wymagana, aby rozwiązać wszystkie obawy", a niesprawiedliwym byłoby ignorowanie wkładu ProllyGeek. Szczerze mówiąc, obaj zasługują na złoty bilet. Mam nadzieję, że nie złamałem żadnych zasad SO ... – beefchimi

Obrazy kamieniarskie/izotopowe/opakowaniowe Załadowane + czcionki sieciowe

Odpowiedz

Powiązane problemy