jQuery Infinite Scrolling/Lazy Loading

Question

Attualmente sto riprogettando il mio sito web e sto cercando di utilizzare JavaScript e jQuery. Ecco cosa ho finora: http://www.tedwinder.co.uk/gallery2/.

La mia visione è di avere tutte le foto su una pagina, che l'utente può scorrere, come ora. Tuttavia, comprendo le limitazioni e gli effetti di avere più di 50 immagini di grandi dimensioni su una pagina e ho considerato l'utilizzo di scrolling infinito e caricamento pigro, che a mio avviso caricherebbe solo le immagini quando l'utente arriva a loro o quando fa clic su un Link "Altro"?

Quindi, la mia domanda è: ridurrebbe il carico della pagina, esattamente come farei per implementare lo scrolling/pigro carico infinito e funzionerebbe in modo efficace, o potreste pensare a un modo più efficace di farlo?

Grazie, Ted

Answer 1

Questo è un buon plug-in per jQuery che gestisce immagine caricamento pigro.

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

Immagini sotto la piega solito essere caricati finché non sono solo scorsi.

Ridurrà la larghezza di banda del sito, ma se non si ha molto traffico non farà molta differenza.

Per un esempio di questa tecnica in uso, controllare http://mashable.com/

Answer 2

Si può provare questo plugin jQuery ho scritto che utilizza i commenti html a carico pigro qualsiasi bit arbitrari di html, comprese le immagini:

jQuery Lazy Loader Blog Post

jQuery Lazy Loader Plugin Page

Ecco un esempio:

<pre class=”i-am-lazy” ><!– 
    <img src=”some.png” /> 
–></pre> 

<pre class=”i-am-lazy” ><!– 
    <div>Any, html css img background, whatever. <img src=”some.png” /> </div> 
–></pre> 

<script type=”text/javascript” src=”jquery.lazyloader.js” ></script> 
<script type=”text/javascript” > 
$(document).ready(function() 
{ 
    $(’pre.i-am-lazy’).lazyLoad(); 
}); 
</script> 

Quindi in pratica si avvolge il contenuto che si desidera caricare pigro con un tag segnaposto e un commento html interno. Quando il segnaposto diventa visibile nel viewport, viene sostituito con la stringa html all'interno del commento.

È possibile utilizzare qualsiasi tag per il segnaposto ma mi piace pre perché esegue il rendering come quota 0 quando all'interno è presente solo un commento.

Spero che questo aiuti! @MW_Collins

Answer 3

provare questo Loading Plugin jQuery pigro Scroll http://code.google.com/p/jquerylazyscrollloading/

Answer 4

Ecco altre due JQuery plugin che fanno pigro carico/scroll infinito:

http://jscroll.com/

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/