Aller au contenu
Support de Zwii
Fred

Image Lazy Loading

Messages recommandés

Le lazy loading est implémenté nativement dans Chrome, et en passe de l'être dans Firefox avec un nouvel attribut HTML de la balise IMG "loading" qui permet aux navigateurs d’activer plus facilement le lazy-loading. Il suffit de l’ajouter aux images. Celui-ci est compatible avec les balises IMG mais également PICTURE et IFRAME.

L’attribut loading supporte 3 valeurs :

    “Lazy” pour activer le lazy-loading.
    “Eager” pour le désactiver.
    “Auto” pour laisser le navigateur choisir.

Partager ce message


Lien à poster
Partager sur d’autres sites

En effet, les dernières infos à ce sujet ont presque un an. Pour le moment, FF ne le supporte pas encore https://davidwalsh.name/loading-lazy

 

Fonction à désactiver ultérieurement une fois que le tag sera supporté.

 

Je ne l'ai pas incluse dans la v9 (un oubli) mais peut-être dans la v10.

Partager ce message


Lien à poster
Partager sur d’autres sites

Lazy Simon ne fonctionne pas, testé sur la 10.0.023.dev avec cette série d'images dans Firefox (le seul navigateur ou ce script peut être provisoirement utile) :

<img src="http://www.myriad-online.com/images/forum/IMG_4692.jpg" alt="">
<br>
<img src="https://www.sylvaindurand.org/img/samples/thorsmork.jpg" alt="">
<br>
<img src="https://upload.wikimedia.org/wikipedia/commons/2/2b/Bayonne_sign_in_French_Basque_Gascon-Occitan.JPG" alt="">
<br>
<img src="http://www.zgyangfotografie.nl/wp-content/uploads/2014/12/Cinque-Terra-at-night-background1.jpg" alt="">
<br>
<img src="http://www.zgyangfotografie.nl/wp-content/uploads/wppa/25.jpg" alt="">
<br>
<img src="http://www.placeblaze.com/google_map_photo/medvedi.jpg" alt="">
<br>
<img src="http://www.placeblaze.com/google_map_photo/vikendi.jpg" alt="">
<br>
<img src="http://www.placeblaze.com/google_map_photo/cesta.jpg" alt="">
<br>
<img src="http://www.placeblaze.com/google_map_photo/asfalt.jpg" alt="">
<br>
<img src="http://www.placeblaze.com/google_map_photo/stena.jpg" alt="">
<br>
<img src="https://yshimizu.files.wordpress.com/2011/11/s14.jpg" alt="">
<br>

Toutes les images sont chargées à l'ouverture de la page, bien que seule la première soit visible.

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 3 heures, Gilux a dit :

Lazy Simon ne fonctionne pas, testé sur la 10.0.023.dev avec cette série d'images dans Firefox (le seul navigateur ou ce script peut être provisoirement utile) :


<img src="http://www.myriad-online.com/images/forum/IMG_4692.jpg" alt="">
<br>
<img src="https://www.sylvaindurand.org/img/samples/thorsmork.jpg" alt="">
<br>
<img src="https://upload.wikimedia.org/wikipedia/commons/2/2b/Bayonne_sign_in_French_Basque_Gascon-Occitan.JPG" alt="">
<br>
<img src="http://www.zgyangfotografie.nl/wp-content/uploads/2014/12/Cinque-Terra-at-night-background1.jpg" alt="">
<br>
<img src="http://www.zgyangfotografie.nl/wp-content/uploads/wppa/25.jpg" alt="">
<br>
<img src="http://www.placeblaze.com/google_map_photo/medvedi.jpg" alt="">
<br>
<img src="http://www.placeblaze.com/google_map_photo/vikendi.jpg" alt="">
<br>
<img src="http://www.placeblaze.com/google_map_photo/cesta.jpg" alt="">
<br>
<img src="http://www.placeblaze.com/google_map_photo/asfalt.jpg" alt="">
<br>
<img src="http://www.placeblaze.com/google_map_photo/stena.jpg" alt="">
<br>
<img src="https://yshimizu.files.wordpress.com/2011/11/s14.jpg" alt="">
<br>

Toutes les images sont chargées à l'ouverture de la page, bien que seule la première soit visible.

Le script est peut-être mal chargé, tu as vérifié ?

Avec favicon switcher, script chargé à partir de vendor mais pas lancé. C’est peut-être le même problème. 
A revoir. 

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 4 heures, Fred a dit :

Le script est peut-être mal chargé, tu as vérifié ?

 

Le script se charge correctement :

lazysimon.png.7e4247e69902335866a612936bb4b98f.png

 

Mais il n'a aucun effet sur le chargement différé des images.

 

Ne te casse pas trop la tête avec cette fonction qui est déjà native sur Chromium et ses clones, dont Chrome, Opera et Edge le dernier en date, même sans ajouter l'attribut loading le lazy loading est effectif par défaut, et est équivalent à loading="auto"

Et selon ce qu'on peut lire sur le web, cette fonction doit prochainement être implémentée dans Firefox

 

Partager ce message


Lien à poster
Partager sur d’autres sites

Par ailleurs, ce script ne devrait pas être placé dans core.php mais dans core.js.php

Mais, même en le plaçant dans core.js.php, donc à la base de body, il ne fonctionne pas davantage

firefoxhero.jpg

Modifié par Gilux

Partager ce message


Lien à poster
Partager sur d’autres sites
Le 05/01/2020 à 00:54, Gilux a dit :

Par ailleurs, ce script ne devrait pas être placé dans core.php mais dans core.js.php

Mais, même en le plaçant dans core.js.php, donc à la base de body, il ne fonctionne pas davantage

firefoxhero.jpg

Tous les scripts js sont dans l’auto loader de core.php, pour cela il doit être copié dans vendor avec un fichier inc.json de définition. 
le script est ensuite appelé par main.php grâce à la fonction showscript. 
 

Quant à Lazy Simon je le supprimerai. Mais il faudra quand même ajouter l’attribut si possible pas à la main.  

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 5 heures, Fred a dit :

Tous les scripts js sont dans l’auto loader de core.php, pour cela il doit être copié dans vendor avec un fichier inc.json de définition. 
le script est ensuite appelé par main.php grâce à la fonction showscript. 

 

Non, tu fais erreur, les scripts placés dans l’auto loader de core.php et copiés dans vendor avec un fichier inc.json de définition sont appelés par main.php grâce à la fonction showVendor() et s'affichent dans le head de la page

Pour être affichés avant </body> ils doivent être placés dans core.js.php, et sont alors appelés par main.php grâce à la fonction showScript()

 

Le concepteur de lazy simon, préconise, en toute logique, de placer son script avant </body>, voir https://lazy.simon-frey.eu/

 

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 6 heures, Fred a dit :

Mais il faudra quand même ajouter l’attribut si possible pas à la main.  

 

Pas forcement, puisque ne pas ajouter l’attribut "loading" équivaut à loading="auto" correspondant au comportement par défaut, celui de laisser le navigateur choisir

 

Mais si on souhaite forcer le lazy loading, c'est très simple, il suffit d'ajouter à la base de core.js.php ce script, à la ligne 440 :

$("img,picture,iframe").attr("loading","lazy");

Pour obtenir cela :

$(document).ready(function(){

	/**
	 * Affiche le sous-menu quand il est sticky
	 */

	/**
	 * Effet accordéon
	 */
	
  // Lazy loading des images et des iframes
	$("img,picture,iframe").attr("loading","lazy");
});

Testé, vérifié et approuvé :

lazysimon_3.png.da5e82ee17d8b74dda5f742f207db544.png

 

Peut-être qu'un meilleur programmeur que moi pourra améliorer ce code jQuery, en tout cas il fonctionne impec tel quel et est on ne peut plus simple ;)

 

  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

@Gilux quand ont répond trop vite sans avoir le code sous les yeux.

 

  // Lazy loading des images et des iframes
	$("img,picture,iframe").attr("loading","lazy");

Difficile de faire plus court.

 

Je m'en occupe dans la semaine : suppression de lazy_simon et ajout de la ligne jquery

 

Fait

  • Merci 2

Partager ce message


Lien à poster
Partager sur d’autres sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.


×
×
  • Créer...