Voici un petit script qui théoriquement vous permettra d’améliorer la qualité de l’expérience utilisateur sur votre site et blog. Sur le principe vous allez faire afficher les images uniquement lorsque le visiteur pourra les voir avec un petit effet fade in très sympathique. Ce script jQuery « Lazy Load » est disponible sous la forme d’un script jQuery mais aussi sous la forme d’un plugin pour wordpress, Image Lazy Load, alors n’hésitez pas à vous faire plaisir.
Quelques images pour la démonstration (cela ne marchera pas dans votre lecteur RSS) :
Par ailleurs si vous utilisez le plugin wp-minify sachez qu’il faudra commenter les lignes 15, 16 et 17 du fichier jquery-image-lazy-loading.php comme cela :
< ?php
/*
Plugin Name: jQuery lazy load plugin
Plugin URI: http://github.com/ayn/wp-jquery-lazy-load/
Description: a quick and dirty wordpress plugin to enable image lazy loading.
Version: v0.10
Author: Andrew Ng
Author URI: http://blog.andrewng.com
*/
function jquery_lazy_load_headers() {
$plugin_path = plugins_url('/', __FILE__);
$lazy_url = $plugin_path . 'javascripts/jquery.lazyload.mini.js';
// $jq_url = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
// wp_deregister_script('jquery');
// wp_enqueue_script('jquery', $jq_url, false, '1.4.2');
wp_enqueue_script('jquerylazyload', $lazy_url, 'jquery', '1.5.0');
}
function jquery_lazy_load_ready() {
$placeholdergif = plugins_url('images/grey.gif', __FILE__);
echo <</*
Accueil
9 Commentaires
Juste un petit complément, en ne chargeant les images que lorsqu’elles sont visibles cela permet de limiter l’utilisation de la bande passante, et d’accélérer le chargement…
Par contre, pour les images situé en sidebar ça a l’air de marcher moyennement.
Merci pour le complément d’information Mel et merci pour le script.
@mel j’avais regardé l’écart en temps de chargement et finalement sur cette page il est vraiment minime c’est pour cela que je parle plus d’esthétique que de performance ;)
Bonjour Henri. Merci pour la news : j’avais vu cet effet chez Suchablog, et je ne savais pas ce qui créait ça. Maintenant je sais.
Par contre, si l’effet est intéressant, je pense qu’il est extrêmement énervant à la lecture, et je dois avouer que je déteste arriver sur des sites qui l’utilisent.
@mel c’est vrai que cela déconne dans la sidebar, il faut aller en bas pour que tout ce charge… Là je bloque…
@louis on teste on teste ;)
Problème de la sidebar réglé, l’effet n’est maintenant visible que sur les images de l’article comme cela on évite l’effet sapin de Noël, il suffit de modifier « img » par la classe de votre image :
jQuery(« img »).lazyload({
Je déteste également cet effet, ça ralentit la lecture des images, c’est très agaçant.
C’est la technique adoptée par de nombreux sites pour économiser de la bande passante et accélérer l’affichage des pages. Mashable.com par exemple.
En effet c’est bien cela!