Isotope + Lazyload: dimensione immagine

Question

Due cose da tenere a mente prima di esporre il mio problema: 1. Non sono un programmatore, quindi non ho IDEA di quello che sto facendo 2. Parlami come me Sono stupido e molto paziente (vedi 1.)

Va bene, ci sono circa un milione di cose sbagliate nel modo in cui il sito è impostato, ma in questo momento sto solo cercando di far funzionare Isotope con Lazyload . Probabilmente ho letto ogni singolo stackoverflow sul problema, ma finora non sono stato in grado di risolvere il mio problema. Sto usando Stacey come CMS. Fondamentalmente, quello che sto cercando di ottenere è simile a xxx.aestheticallyloyal.com (o, in realtà, www.imageworkshop.com/lazyload-portfolio), ma con miniature cliccabili disposte in stile Isotopo/Massoneria che si aprono nelle rispettive pagine del progetto. Ho provato a far funzionare Infinitescroll ma non sono pienamente sicuro che la paginazione sia supportata in Stacey, quindi ho rinunciato a questo. Inserisci Lazyload.

Ho ottenuto Isotope per funzionare correttamente. Posso far funzionare Lazyload, separatamente. Ma ogni volta che provo a mescolare i due, fallisco miseramente. Il problema è che le immagini sono organizzate da Isotope prima che siano completamente caricate, quindi non vengono allineate in base alla loro dimensione reale (che è variabile) ma ottengono una larghezza e un'altezza fisse (sto bene con larghezza fissa, questo è il punto, ma l'altezza dovrebbe ridimensionarsi di conseguenza). Se ridimensiono la finestra dopo, tuttavia, la griglia viene regolata di conseguenza, come dovrebbe.

Questo è il codice con cui sto lavorando:

<script> 
$(function() { 
    var $window = $(window); 
    var $container = $('#container'); 
    var $imgs = $("img.lazy"); 

    $imgs.lazyload({ 
     event: 'scroll', 
     effect: 'fadeIn', 
     failure_limit: Math.max($imgs.length - 1, 0), 
     appear: function() {} 
    }); 

    $(function() { 
     $container.imagesLoaded(function() { 
      $container.isotope({ 
       onLayout: function() { 
        $window.trigger("scroll"); 
       }, 
       itemSelector: '.photo' 
      }); 
     }); 
    }); 

    $window.load(function() { 
     $container.isotope('reLayout'); 
    }); 
}); 
    </script> 

E 'probabilmente sbagliato in tanti modi ... non lo so. Inoltre, penso che reLayout stia facendo assolutamente nulla, e da lì non so davvero dove andare comunque. Qualcuno può dare un'occhiata al mio sito flow.blukaet.com e fammi sapere come ordinare questo casino? (Non importa il menu a sinistra, non ho nemmeno iniziato a guardarlo). Grazie.

UPDATE # 1

Ho cercato di utilizzare uno script LazyLoad diverso chiamato Fasterize. Le cose sembrano andare solo marginalmente meglio, ma ho ancora problemi a visualizzare le immagini che appaiono sotto la piega in modo corretto. Fondamentalmente tutto ciò che carica nel viewport viene risolto correttamente da Isotope, ma le immagini rimanenti non vengono aggiunte in base alla loro dimensione effettiva, finale e visibile. Avrei bisogno di attivare qualcosa in Isotope per renderlo riorganizzare i nuovi elementi dopo che sono stati caricati. Non so se è possibile a tutti. Qualcuno può aiutare? Ecco il sito dove puoi vedere cosa sta succedendo: flow.blukaet.com (Il codice sopra non è più attuale).

UPDATE # 2

Quindi questo è il codice grazie modificato alla risposta fornita di seguito (anche, questo sta usando fasterize/lazyload in contrapposizione lazyload di per appelsiini):

<script> 
$(window).load(function() { 

var $container = $('#container'); 
var $imgs = $("img"); 

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

$(window).scroll(function() { 
    $container.isotope('reLayout'); 
}); 
}); 
</script> 

Non è super liscio, ma ha fatto il lavoro.

precedenza ho provato qualcosa sulla falsariga di:

<script> 
$(function() { 

var $container = $('#container'); 
var $imgs = $("img"); 

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

$imgs.load(function() { 
    $container.isotope('reLayout'); 
}); 
}); 
</script> 

che in realtà correva molto più agevole, ma in qualche modo stava dando il seguente errore console:

cannot call methods on isotope prior to initialization; attempted to call method 'reLayout'

Quindi non so.

Un'altra cosa da notare è che il codice funziona in FF e Opera. Apparentemente Safari ignora del tutto il carico. Non ho provato su Chrome e IE. Se qualcuno vuole controllare: flow.blukaet.com

Answer 1

Huzzah! Penso che abbiamo un vincitore finale. Ho aggiustato un po 'di più quella mezza soluzione che ho trovato - per tentativi ed errori, attenzione, perché ancora non ho idea di quello che sto facendo - e penso di aver finalmente capito bene. La console non restituisce più l'errore di inizializzazione e il codice sembra comportarsi in modo più o meno corretto (credo ?!).

<script> 
$(document).ready(function() { 

    var $container = $('#container'); 
    var $imgs = $("img"); 

    $container.imagesLoaded(function() { 
     $container.isotope({ 
      itemSelector: '.photo' 
     }); 
     $imgs.load(function() { 
      $container.isotope('reLayout'); 
     }); 
    }); 
}); 
</script> 

Così 'Ridefinisci layout' non accade sul rotolo, ma quando il carico immagini, in questo modo essi non rimanere bloccati se lo scorrimento non va tutta la strada attraverso.

In Safari Lazyload fa ancora tutto ciò che vuole, e come al solito non ho potuto testare su Chrome e IE, ma in FF e Opera sembra essere ok. Controlla flow.blukaet.com per un esempio funzionante.

Answer 2

Ho lo stesso problema con una griglia reattiva. Controlla questa immagine, la griglia va bene a sinistra e si rompe a destra.

griglia è rotto perché è necessaria un'altezza specifica per l'immagine e il processo reattivo passare il valore di altezza in "auto".

Quindi qui dobbiamo eseguire il relayout quando le immagini sono caricate (dando un'altezza specifica da elaborare).

Per ora la soluzione che ho trovato è a Ridefinisci layout su scrool:

$(window).scroll(function() { 
     $container.isotope('reLayout'); 
}); 

ma sono sicuro che ci sia un modo migliore per fare questo.

E provare freetile per la griglia, l'ho trovato fantastico e leggero di altri. http://yconst.com/web/freetile/

Answer 3

Mentre avevo lo stesso problema e non ero in grado di risolvere, ho capito che si trattava solo di un avvertimento. Così ho semplicemente reso invalido commentando fuori dalla linea di log della console nel file "jquery.isotope.min.js" (o jquery.isotope.js)

var logError = function(message) { 
    if (window.console) { 
    //window.console.error(message); 
    } 
};