Le immagini vengono caricate quando entrano nella sezione visibile del browser?

Question

Stavo navigando in rete e ho visto qualcosa che non avevo mai visto prima. su questo sito: http://blogof.francescomugnai.com/2009/04/mega-roundup-of-geektool-scripts-inspiration-gallery/

Quando si navigare in basso nella pagina, le immagini vengono caricate solo quando sono nella parte visibile del browser. Non l'ho mai visto prima e mi chiedevo se qualcun altro ha e come esattamente lo si farebbe.

Suppongo che si tratti di una specie di plugin Wordpress (è quello che sta usando) ma non ne sono sicuro. E 'javascript? Si stanno effettivamente caricando sul caricamento della pagina, ma diventano visibili in seguito per un effetto "snazzy" o è effettivamente utile per i tempi di caricamento delle pagine più rapidi?

Answer 1

LazyLoad non è più disponibile secondo il sito web. Apparentemente il codice non funziona più sui nuovi browser e l'autore non ha tempo di aggiornarlo.

Il plug-in "visualizzato" funziona bene per me.

http://plugins.jquery.com/appear/

Esso consente di specificare una funzione di callback per un elemento. La funzione di callback è chiamata quando l'elemento appare in vista. Dal sito:

$('#foo').appear(function() { 
    $(this).text('Hello world'); 
}); 

Answer 2

Se si guarda alla sorgente della pagina si fa riferimento, contiene questo pezzo di codice:

jQuery(document).ready(function($){ 
    jQuery(".SC img").lazyload({ 
    effect:"fadeIn", 
    placeholder: "http://blogof.francescomugnai.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" 
    }); 
}); 

ho il sospetto che è come stanno realizzando l'effetto. Esso utilizza il plugin jQuery LazyLoad, che può essere trovato qui:

http://www.appelsiini.net/projects/lazyload

Answer 3

"wp-content/plugins/jquery-image-lazy-loading"

caricatore pigro è un plugin jQuery scritto in JavaScript. Ritarda il caricamento delle immagini nelle (lunghe) pagine Web. Le immagini al di fuori della finestra di visualizzazione (parte visibile della pagina Web ) non vengono caricate prima che l'utente si sposti su di esse. Questo è l'opposto del precaricamento dell'immagine .

L'utilizzo del carico lazy su lunghe pagine Web contenente molte immagini di grandi dimensioni rende più veloce il caricamento della pagina . Il browser sarà nello stato pronto dopo il caricamento delle immagini visibili . In alcuni casi può anche aiutare per ridurre il carico del server.

http://www.appelsiini.net/projects/lazyload

Così sembra che passa attraverso ogni immagine specificata o all'interno del contesto di un elemento e sostituisce lo src con una gif segnaposto di fronte alle immagini completamente carico, salva l'originale URI e quando l'immagine è "visibile" sostituisce il segnaposto con l'immagine reale.

Answer 4

Come ha sottolineato Sanjay, il plugin jQuery LazyLoad di Applesiini non funziona più. Ecco un altro plugin jQuery che ho trovato. Solo un'altra opzione oltre a jQuery Appear.

http://plugins.jquery.com/project/LazyLoadOnScroll

http://ivorycity.com/blog/2011/04/19/jquery-lazy-loader-load-html-and-images-on-scroll/