Ajoutez un effet d’apparition fluide sur vos images

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 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

< ?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 <<<EOF
<script type="text/javascript">
jQuery(document).ready(function($){
  if (navigator.platform == "iPad") return;
  jQuery("img").lazyload({
    effect:"fadeIn",
    placeholder: "$placeholdergif"
  });
});
 
EOF;
}
 
  add_action('wp_head', 'jquery_lazy_load_headers', 5);
  add_action('wp_head', 'jquery_lazy_load_ready', 12);
?>
Publié le July 9, 2010 à 9:54 am, dans wordpress tagué , , , , , . Enregistrez le permalink. Suivez les commentaires avec le flux RSS de l’article. Vous pouvez publier un commentaire.

16 Tweets 5 Other Comments

27 Commentaires

  • 1
    mel
    July 9, 2010 - 10:42 am | Permalink

    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.

  • 2
    Agence wordpress
    July 9, 2010 - 10:45 am | Permalink

    Merci pour le complément d’information Mel et merci pour le script.

  • 3
    henri
    July 9, 2010 - 10:48 am | Permalink

    @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 ;)

  • 4
    Louis
    July 9, 2010 - 10:59 am | Permalink

    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.

  • 5
    henri
    July 9, 2010 - 11:00 am | Permalink

    @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 ;)

  • 6
    henri
    July 9, 2010 - 11:25 am | Permalink

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

  • 7
    Adri
    July 11, 2010 - 12:04 am | Permalink

    Je déteste également cet effet, ça ralentit la lecture des images, c’est très agaçant.

  • 8
    Romain
    July 19, 2010 - 3:00 pm | Permalink

    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.

  • 9
    henri
    July 19, 2010 - 3:08 pm | Permalink

    En effet c’est bien cela!

  • 21
    titi
    July 13, 2010 - 6:40 pm | Permalink

    Pourquoi un plugin pour Google Analytics alors qu’il suffit de coller le code dans le footer.php du thème ?

    This comment was originally posted on WordPress Francophone

  • 22
    Benoît
    July 13, 2010 - 6:45 pm | Permalink

    titi > Sur ce point, je te rejoins tout à fait… mais je sais que beaucoup préfère la facilité d’une extension. C’est pourquoi j’en parlais ici.

    This comment was originally posted on WordPress Francophone

  • 23
    titi
    July 13, 2010 - 6:47 pm | Permalink

    Oui je me demandais simplement pourquoi des gens développer ce genre de plugin. Qui soit disant passant, la manip. pour l’utilisateur est plus longue à faire

    Donc on est bien d’accord que ca n’apporte rien “techniquement parlant” d’utiliser un plugin. Google récupère et affiche les même stats ?

    This comment was originally posted on WordPress Francophone

  • 24
    Benoît
    July 13, 2010 - 6:52 pm | Permalink

    Je ne me prononcerai pas sur l’apport de telles extensions n’en utilisant pas moi-même, mais au vue de l’article que je présente ci-dessus on dirait qu’il y a pas mal de fonctions intégrées. J’aurai tendance à dire que ça alourdi davantage WordPress… mais bon cela n’engage que moi.

    This comment was originally posted on WordPress Francophone

  • 25
    Michel xiligroup
    July 15, 2010 - 3:33 pm | Permalink

    Merci pour ces synthèses régulières. Juste une précision : en anglais le shortcode est réservé au code entre crochet [ ] qu’un auteur met au sein de son texte et qui éventuellement affichera un style ou une galerie etc… Par contre, un “template tag” est une fonction php que l’on peut utiliser dans un thème, un plugin ou ailleurs. Certains template-tags de WP ou de plugins ont un équivalent en shortcode. C’est ainsi qu’avec xili-tidy-tags, un auteur, sans connaitre le php, peut mettre un nuage de mots-clés au sein de ton article.

    This comment was originally posted on WordPress Francophone

    • Laisser un commentaire

    Votre email ne sera jamais publié. Les champs obligatoires sont marqués *

    *
    *

    Additional comments powered by BackType