Changeset 75931 in spip-zone


Ignore:
Timestamp:
Sep 17, 2013, 8:40:16 AM (6 years ago)
Author:
cedric@…
Message:

on applique la technique d'optimisation décrite par http://blog.nursit.net/slider-d-images-attention-au-temps-de-chargement.html avec quelques modifs :

  • nommage du filrtre nivoslider_img_display_first_only plus clair
  • on ne supprime pas l'attribut src (car obligatoire), a la place on lui met un gif transparent 1px en base64
  • on ajoute la class="no_image_filtrer" sur les images car sinon elles sont passées par image_reduire lorsque le modele est utilisé dans un article, et ça met l'image base64 dans un fichier (par ailleurs réduire les images ne sert a rien car le slider a une taille imposee)
Location:
_plugins_/nivoslider/trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/nivoslider/trunk/modeles/nivoslider_base.html

    r75928 r75931  
    103103                                |inserer_attribut{title,#TITRE}
    104104                                |inserer_attribut{data-thumb,#FICHIER|image_reduire{#GET{controlNavThumbsWidth},#GET{controlNavThumbsHeight}}|extraire_attribut{src}}
     105                    |nivoslider_img_display_first_only{#COMPTEUR_BOUCLE}
     106                    |inserer_attribut{class,no_image_filtrer}
    105107                )]
    106108                [</a>(#GET{lien}|oui)
     
    109111</div>
    110112<script type="text/javascript">/*<![CDATA[*/
    111         jQuery(function() {
    112                 jQuery('.nivoSlider').each(function(){
    113                         var me=jQuery(this);
    114                         var options=eval('options='+me.attr('data-slider')+';');
    115                         if (options)
    116                                 me.nivoSlider(options);
    117                 });
     113function nivoslider_load_next_img(slider){
     114        var toload = jQuery("img:not(.loaded)[data-src^=]",slider);
     115        if (toload.length) { toload = toload.eq(0); toload.attr('src',toload.attr('data-src')).attr('data-src','').addClass('loaded');}
     116}
     117jQuery(function() {
     118        jQuery('.nivoSlider').each(function(){
     119                var me=jQuery(this);
     120                var options=eval('options='+me.attr('data-slider')+';');
     121                if (options){
     122                        options = jQuery.extend({
     123                                        afterLoad: function(){nivoslider_load_next_img(me)},
     124                                  afterChange: function(){nivoslider_load_next_img(me)}
     125                                },options);
     126                        me.nivoSlider(options);
     127                }
    118128        });
     129});
    119130/*]]>*/</script>
    120131</B_doc>
  • _plugins_/nivoslider/trunk/nivoslider_options.php

    r75929 r75931  
    2929
    3030
     31function nivoslider_img_display_first_only($img, $compteur){
     32        if ($compteur==1) return $img;
     33
     34        $src = extraire_attribut($img,"src");
     35        $img = inserer_attribut($img,"data-src",$src);
     36        // gif transparent 1px
     37        // http://proger.i-forge.net/The_smallest_transparent_pixel/eBQ
     38        $img = inserer_attribut($img,"src","data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==");
     39        return $img;
     40}
     41
    3142?>
Note: See TracChangeset for help on using the changeset viewer.