jQuery Lazy Load pour SPIP - commentaires

jQuery Lazy Load pour SPIP

Ou au coup par coup, sur les logos par exemple, avec <|inserer_attribut{loading,lazy}

jQuery Lazy Load pour SPIP

En fait pour la surcharge, il faut simplement mettre le fichier modifié plugins-dist/medias/modeles/image.html dans squelettes/modeles/image.html.

C'est exactement ça :)

jQuery Lazy Load pour SPIP

En fait pour la surcharge, il faut simplement mettre le fichier modifié plugins-dist/medias/modeles/image.html dans squelettes/modeles/image.html.
Je me compliquais la vie ;)

jQuery Lazy Load pour SPIP

Re,
pour l'ajout du lazy loading en SPIP 4, j'ai modifié le fichier plugins-dist/medias/modeles/image.html pour ajouter loading="lazy"

Ce qui donne ceci :
[]})]})]

J'ai essayé de faire une surcharge, mais je n'y arrive pas trop (je suis pas informaticien, mais je me soigne ;) ). (discussion sur https://forum.spip.net/fr_275524.html pour plus d'info)

En tout cas, comme ça, ça marche, mais ça ne passera pas la prochaine mise à jour de medias. Il faudra refaire cette modif.

Merci b_b pour les pistes que tu m'as passé !

jQuery Lazy Load pour SPIP

Ha oui, my bad, mon site utilise https://apoorv.pro/lozad.js/ car le support natif n'était pas encore au top à l'époque (il faudra que je change ça).

Oui, il faut ajouter un attribut loading aux images.

jQuery Lazy Load pour SPIP

Super, merci pour ta réponse !

Du coup, je ne comprends pas trop s'il n'y a rien à faire du tout ou s'il faut quand même ajouter un attribut loading="lazy" à l'image.
Je vois sur ton site que tu as une class="lozad" sur les images, mais je ne vois pas trop ce que ça fait derrière.
Par ailleurs, je vois bien comment mettre un attribut html dans une page html, mais peut-on ajouter un attribut directement à partir d'un article à ?

jQuery Lazy Load pour SPIP

Salut, ce plugin n'a plus vraiment d'intérêt depuis que le lazy loading est pris en charge nativement cf https://developer.mozilla.org/fr/docs/Web/Performance/Lazy_loading

Perso je l'utilise déjà sans problème sur mon site perso https://www.eliaz.fr/ et dans mes projets récents exemple https://github.com/brunob/expoos/commit/9dd7e55dc04ffab8ffdb20670c6328fc253d634a

jQuery Lazy Load pour SPIP

Bonjour,
un portage sur 4.* est-il prévu ?
J'ai essayé de l'installer en modifiant paquet .xml en
compatibilite="[2.1.0;4.0.*]"
ça s'installe, mais je n'ai pas l'impression que ça fonctionne.
Merci pour toute l'implication dans le projet Spip !

jQuery Lazy Load pour SPIP

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.

 
 #TITRE  → 
 
 

 [(#LOGO_ARTICLE|image_recadre{1:1,'-','center center'}|sinon {#LOGO_DOCUMENT|image_recadre{1:1,'-','center center'}})]
 
#TITRE

jQuery Lazy Load pour SPIP

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

jQuery Lazy Load pour SPIP

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,

jQuery Lazy Load pour SPIP

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 .= '';

jQuery Lazy Load pour SPIP

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.

jQuery Lazy Load pour SPIP

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

jQuery Lazy Load pour SPIP

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

@++

jQuery Lazy Load pour SPIP

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.

jQuery Lazy Load pour SPIP

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

jQuery Lazy Load pour SPIP

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

jQuery Lazy Load pour SPIP

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

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