web-dev-qa-db-fra.com

jQuery Infinite Scrolling/Lazy Chargement

Je suis actuellement en train de redessiner mon site web et je cherche à utiliser JavaScript et jQuery. Voici ce que j'ai jusqu'à présent: http://www.tedwinder.co.uk/gallery2/ .

Ma vision est d'avoir toutes les photos sur une seule page, que l'utilisateur peut faire défiler, comme maintenant. Cependant, je comprends les limites et les effets d’avoir plus de 50 images grand format sur une seule page et j’ai envisagé d’utiliser le défilement infini et le chargement paresseux. "Plus" lien?

Ma question est donc la suivante: cela réduirait-il le chargement de pages, comment ferais-je pour implémenter le défilement infini/chargement paresseux et cela fonctionnerait-il efficacement, ou pourriez-vous penser à un moyen plus efficace de procéder?

Merci, Ted

javascriptjqueryscrolllazy-loadinginfinite
20
Ted

C'est un très bon plugin pour jQuery qui gère le chargement paresseux d'images. 

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

Les images situées au-dessous du pli ne seront pas chargées tant qu'elles ne seront pas affichées.

Cela réduira la bande passante de votre site, mais si vous n'avez pas beaucoup de trafic, cela ne fera pas beaucoup de différence. 

Pour un exemple de cette technique utilisée, consultez http://mashable.com/

12
Pepper

essayez ce plugin de chargement jQuery Lazy Scroll http://code.google.com/p/jquerylazyscrollloading/

4
h920526

Vous pouvez essayer ce plugin jQuery que j'ai écrit et qui utilise des commentaires html pour charger paresseusement des bits arbitraires de html, y compris des images:

Blog de jQuery Lazy Loader

Page du plugin jQuery Lazy Loader

Voici un exemple:

<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>

En résumé, vous encapsulez le contenu que vous souhaitez charger avec une balise fictive et un commentaire HTML interne. Lorsque l'espace réservé devient visible dans la fenêtre d'affichage, il est remplacé par la chaîne HTML contenue dans le commentaire. 

Vous pouvez utiliser n’importe quelle balise pour l’espace réservé, mais j’aime bien le pré, car il affiche une dimension 0 quand il n’ya qu’un commentaire.

J'espère que cela aide! @ MW_Collins

3
Michael Collins

Voici deux autres plugins JQuery qui font du paresseux chargement/défilement infini:

http://jscroll.com/

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

0
Paul B. Hartzog