jQuery Lazy Load pour SPIP

Published : 29 July 2009 – updated on 6 April 2020 – by b_b – 30 commentaires

1
2
3
4
5
19 Votes
Ce plugin permet d’utiliser le script jQuery Lazy Load dans les pages publiques de votre site.

Ce plugin permet de différer le chargement des images des pages de votre site. Chaque image n’est chargée qu’à partir du moment où elle approche à une certaine distance du bas de la fenêtre du navigateur. Cela peut être pratique pour les sites qui affichent beaucoup d’images sur leurs pages (réduction de la bande passante utilisée si le visiteur ne visionne pas toute la page).

Accéder à la page de démonstration du plugin.

Installation et configuration

Installation et activation comme tous les plugins.

La page de configuration du plugin permet de gérer :

  • le sélecteur des images sur lesquelles Lazy Load sera appliqué (expression CSS ou étendue jQuery).
  • la distance du bord de la fenêtre à laquelle les images seront chargées.
  • l’événement qui déclenchera l’affichage des images (click, mouseover, etc).
  • l’effet de transition lors du chargement des images (fadeIn, slideDown, etc).

Crédits

Script original de Mika Tuupola

Icône de www.iconshock.com

Discussion

5 years 1 year 3 months Without limit
par date
Filter

13 discussions

  • gaston

    Bonjour,
    Merci pour ce pluging qui m’aiderait beaucoup (j’ai plus de 600 articles sur une page), chaque article affiche soit un logo document redimensionner ou un un logo article. Et ma page affiche 38 mo...

    Mais je ne parvient pas à le faire marcher...

    Le pluging marche-t-il sur les logo documents ?

    Ma boucle actuelle ci dessous, si je mets .contenu_vignette_artiste img dans le formulaire du pluging cela ne marche pas.

    j’utilise accordion pour classer par ordre alphabétique.

    <BOUCLE_actu(RUBRIQUES){id_rubrique}>

<div id="accordion">
<BOUCLE_actu_article(RUBRIQUES){id_parent}{par titre}{tout}>


<h3 class="accordion">#TITRE <span style="float:right;"> &#8594;&nbsp;</span></h3>
<div>


<BOUCLE_mot(MOTS){id_groupe=1}{par titre}>
<BOUCLE_expo_article(ARTICLES){id_rubrique}{id_groupe=1}{id_secteur !IN 3}{!id_mot=11}{id_mot}>

<div class="contenu_vignette_artiste" >
<a href="#URL_ARTICLE">
<BOUCLE_image(DOCUMENTS) {id_article} {mode=image} {par rang_lien, num titre,} {0,1}>
        [(#LOGO_ARTICLE|image_recadre{1:1,'-','center center'}|sinon {#LOGO_DOCUMENT|image_recadre{1:1,'-','center center'}})]
</BOUCLE_image>

<div class="info_vignette_artiste">
<h3 class="vignette">#TITRE</h3>
</div>
</a>
</div>

</BOUCLE_expo_article>
</BOUCLE_mot>



</div>
</BOUCLE_actu_article>
</div>
</BOUCLE_actu>

    Reply to this message

  • 1
    VS

    Bonjour,

    Je vois qu’il y a un souci avec le plugin GIS : les images apparaissant dans les bulles des points ne sont jamais chargées.

    La carte est construite en js après le chargement de la page... Il faudrait donc soit exclure ces images de lazyload, soit être capable de les charger après le chargement de la carte.

    L’usage d’un sélecteur plus restrictif, comme .spip_documents>img est sans effet.

    Avez-vous une idée de ce qu’il est possible de faire ?

    Merci,

    • b_b

      Salut, il faudrait affiner le script d’initialisation de lazyload pour corriger ce bug, mais je n’ai plus vraiment envie de faire évoluer ce plugin qui est basé sur une version trop ancienne du script lazy load. La version 2.x de ce dernier cf https://github.com/tuupola/lazyload/tree/2.x utilise l’API intersection observer, qui est bien plus efficace.

      Autre piste intéressante https://github.com/ApoorvSaxena/lozad.js qui utilise aussi l’API intersection observer et que j’ai mis en place de manière non générique sur mon site perso https://www.eliaz.fr/

      Bref, il serait temps de faire évoluer ce plugin SPIP pour utiliser des technos à jour et je ne suis pas certain d’avoir le temps de le faire prochainement, si quelqu’un⋅e est motivé⋅e gogogo :)

    Reply to this message

  • 1
    Julien

    LAZY LOAD ET AJAX

    Ce script marche bien mais :

    -  j’ai ajouté un filtre pour que les LOGO_ARTICLE soit aussi en lazy load. Par contre, avec la pagination en ajax, sur les blocs d’articles suivants, on n’a plus aucune image. J’ai bien tenté un appel à Lazyload(); au chargement ajax, mais rien n’y fait... Une idée ?

    -  dans le code HTML du site, j’ai un premier bloc central, puis une colonne, mais qui est en float, donc qui se positionne à droite du centre. Tout se passe bien pour le centre pour le lazyload (en premier dans le flux HTML), mais rien ne se passe (pas d’image) dans la colonne. Ces dernières se chargent uniquement quand je remonte la page depuis le bas ! Est-ce lié à l’ordre du flux HTML ?

    Merci de vos idées ou explications.

    • A mon avis, pour le chargement Ajax, il faut modifier le fichier “lazyload_pipelines.php”, en remplaçant le $flux de la ligne 18 par :

      $flux .= '<script type="text/javascript">
   function chargement_lazyload(){
      $(function(){
         $("'.$selecteur.'.lazy").show().lazyload({
         threshold : '.$distance.',
         placeholder : "'._DIR_PLUGIN_LAZYLOAD.'images/grey.gif",
         '.$event.'
         '.$effect.'
      });
   });
}
if(typeof onAjaxLoad == "function") onAjaxLoad(chargement_lazyload);
if (window.jQuery) jQuery(document).ready(chargement_lazyload);
</script>';

    Reply to this message

  • Ramina

    Bonjour,

    Quelqu’un a-t-il une idée de comment désactiver LazyLoad sur une page particulière d’un site.

    En fait, le plugin marche super, mais sur certaines pages il cohabite mal avec un autre plugin (Cycle2). Je ne vous explique pas le détail pour ne pas compliquer ma question. (Mais je peux, si vous voulez ;-)

    Merci d’avance

    Reply to this message

  • 4
    fred

    La dernière version du script fait ce qu’il doit faire, à savoir le chargement différé des images (https://github.com/tuupola/jquery_lazyload).

    J’ai mis le plugin à jour en conséquence, avec une contrainte côté SPIP: comme il fallait modifier le html j’ai surchargé les modèles de doc. Il y a sans doute d’autres façons de faire, je suis allé au plus simple pour moi.

    En l’état ça marche très bien avec les squelettes de la dist, 3.2 inclue, mais il faut donc penser à ajouter le code qui va bien dans ses modèles de doc perso si nécessaire. Par exemple, pour le modèle img (cf. la zone):

    <img class="lazy" data-original='#URL_DOCUMENT'[ width="(#LARGEUR)"][ height="(#HAUTEUR)"] alt="[(#TITRE|texte_backend)]"[ title="(#TITRE|texte_backend)"] />
<noscript><img src="#URL_DOCUMENT" [ width="(#LARGEUR)"][ height="(#HAUTEUR)"] alt="[(#TITRE|texte_backend)]"[ title="(#TITRE|texte_backend)"]></noscript>

    L’attribut source ’src’ est remplacé par ’data-original’ récupéré par le script jQuery pour charger l’image au défilement, le fallback <noscript> indiquant la source permet de charger les images dans la page si javascript est désactivé ou absent du navigateur.

    Le plugin est repassé en test pour la forme mais aucun risque que ça casse quoi que soit — de toute façon ça ne marchait pas pantoute avant :)

    A c’t’heure le zip n’a pas été généré et la page dédiée sur plugins.spip est aux fraises, donc si vous voulez essayer c’est via svn://.../jquery_lazyload/trunk.

    • b_b

      Merci pour la mise à jour, je viens de forcer la mise à jour de la page sur plugins.spip cf : http://plugins.spip.net/lazyload

    • fred

      Merci! Il faudrait aussi mettre à jour les mots-clés de version et les liens de téléchargement sur cette page ;)

      Quelques précisions encore si des personnes qui utilisaient vraiment ce plugin jusqu’à aujourd’hui constatent un changement de comportement:

      • le script s’applique par défaut à toute balise ’img’ de classe ’.lazy’ et dont l’attribut ’src’ a été remplacé par un attribut ’data-original’: il n’est donc pas limité aux seuls modèles d’image SPIP, mais c’est au webmestre de faire les modifs idoines dans ses squelettes pour étendre son application;
      • il reste possible de restreindre l’application du script à un sélecteur particulier via le formulaire de configuration;
      • le script s’applique aussi à l’espace privé, mais en mode édition les images disparaissent de la prévisualisation du porte-plume;
      • enfin, le code original est toujours disponible en version v0 pour SPIP 2 qui tourne en SPIP 3, il suffit d’adapter le plugin.xml.

      À noter que le même script jQuery est embarqué d’une autre manière par le plugin adaptive images (qui n’est pas conçu que pour ça et qui fait bien d’autres choses pas toutes appropriées à tous les sites).

    • b_b

      Il faudrait aussi mettre à jour les mots-clés de version et les liens de téléchargement sur cette page ;)

      Rien à faire de ce côté, il faut juste attendre que le cron qui le fait automatiquement passe par ici.

    • fred

      Ha, OK ! (c’est que je me fis tancer une fois il y a bien longtemps de ne l’avoir pas fait à la main...)

      @++

    Reply to this message

  • Julien

    Bonjour,

    Ce plugin marche-t-il sous SPIP 3.1 ? J’ai modifié le plugin.xml pour que cela passe, mais une fois dans la page, les images sont chargées directement, avec un bon vieux src dans le code source...

    D’où ma question ! Et si oui, cela marche aussi avec les logo redimensionné par exemple ?

    Merci pour le temps pour répondre.

    Julien

    Reply to this message

  • 2
    Fil

    Je n’arrive pas à faire fonctionner ce plugin. Quand on regarde la page on dirait qu’il marche (les images apparaissent grisées puis se chargent quand on scrolle) ; mais quand on regarde firebug et les logs du serveur, on voit que les images sont chargées dès le début... puis une seconde fois quand elles se “dégrisent”.

    • b_b

      Salut Fil,

      Oui il y a bien un bug avec le script original. On peut trouver pas mal d’infos là dessus dans les commentaires du site de l’auteur. Tout d’abord le script ne semble pas fonctionner sous Safari :

      Due to webkit bug #6656 Lazy Loading wont give you any improvements in Safari. It will load all images you wanted it or not.

      De plus le script ne fonctionne pas bien avec les dernières versions des navigateurs. La solution (pas très propre) proposée par l’auteur est de modifier le html de ses images :

      http://www.appelsiini.net/projects/lazyload#comment-52886388

      http://www.appelsiini.net/2009/12/tuning-lazy-loader

      En résumé : ça marche pas chez moi non plus :p

    • Billou

      C’est moi ou 5 ans plus tard le problème est toujours présent ?

    Reply to this message

  • 4
    Julien

    Bonjour,

    Je ne trouve nul part la page de configuration du plugin sur SPIP 3.0.11. Même en y ajoutant CFG. J’ai également testé sur une nouvelle installation de SPIP.

    Merci d’avance.

    • b_b

      Ha oui, c’est juste que le plugin n’a pas été testé sous SPIP 3 et n’est pas encore compatible avec cette version. Il faut que je corrige la balise qui indique la compatibilité à ce sujet.

      En attendant, si tu veux le tester en SPIP 3 il te faudra le plugin CFG pour accéder à sa page de config. N’hésite pas à partager tes retours suite à cet essai afin que je sache si ça vaut le coup de porter la page de config du plugin pour SPIP 3.

    • Julien

      Salut bb.

      Justement, même avec CFG je n’arrive pas a mettre la main sur une page de configuration. Donc je peux rien tester :-)

      Merci beaucoup.

    • b_b

      Et hop, je viens de publier deux versions du plugin :

      • la branche v0 (celle qui était publié jusqu’ici) est compatible SPIP 2.0
      • la branche v1 est compatible SPIP 2.1 et 3.0 (elle utilise spip bonux pour la configuration en 2.1)

      http://zone.spip.org/trac/spip-zone/changeset/76566

      J’ai testé la branche 1 du plugin sous SPIP 2.1 et 3.0, cela fonctionne bien. Les zips seront disponibles dans l’après midi.

      ++

    • Julien

      Merci beaucoup ! Je vais tester ça today!

      Julien

    Reply to this message

  • 1
    Erwann

    Bonjour

    Ce plugin n’est plus disponible?

    • b_b

      Ha oui tiens, merci du signalement, je corrige et le zip sera de retour dans la journée.

      ++

    Reply to this message

  • 2
    Valéry

    Joli !

    Existe-t-il un moyen d’étendre l’effet à tous les éléments et non pas seulement aux images ? Ceci pourrait avantageusement remplacer la pagination pour l’exploration du contenu via une page “infinie”.

    • b_b

      Salut Valéry, non le plugin ne gère que le chargement différé des images. J’ai déjà repéré des scripts jquery pour gérer un “scroll infini” mais je n’ai pas encore commencer à travailler sur le portage de ces scripts pour SPIP.

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

      ++

    • Valéry

      Merci pour ton retour. D’ores et déjà le plugin permet de propose une liste d’articles bien plus longue sans être handicapé par le poids des vignettes.

    Reply to this message

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite / PostgreSQL
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparait.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom