Changeset 104116 in spip-zone


Ignore:
Timestamp:
Apr 28, 2017, 1:43:37 PM (3 years ago)
Author:
homere1974@…
Message:

Rien que pour son logo, ce plugin méritait de marcher. Repassé en 'test' au cas où.

  • maj du script jquery
  • surcharge les modèles d'image
  • actif sur l'espace privé
  • fallback qui va bien
Location:
_plugins_/jquery_lazyload/trunk
Files:
5 added
4 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/jquery_lazyload/trunk/formulaires/configurer_lazyload.html

    r76566 r104116  
    1313                        <p class="explication"><:lazyload:cfg_inf_selecteur:></p>
    1414                        <input type="text" name="selecteur" class="text" id="lazyload_selecteur" size="60"
    15                                 value="#ENV{selecteur, #contenu img}" />
     15                                value="#ENV{selecteur, img}" />
    1616                </li>
    1717                <li class="editer_lazyload_distance[ (#ENV**{erreurs}|table_valeur{distance}|oui)erreur]">
  • _plugins_/jquery_lazyload/trunk/javascript/jquery.lazyload.js

    r38773 r104116  
    1 /*
     1/*!
    22 * Lazy Load - jQuery plugin for lazy loading images
    33 *
    4  * Copyright (c) 2007-2009 Mika Tuupola
     4 * Copyright (c) 2007-2015 Mika Tuupola
    55 *
    66 * Licensed under the MIT license:
     
    1010 *   http://www.appelsiini.net/projects/lazyload
    1111 *
    12  * Version:  1.5.0
     12 * Version:  1.9.7
    1313 *
    1414 */
    15 (function($) {
     15
     16(function($, window, document, undefined) {
     17    var $window = $(window);
    1618
    1719    $.fn.lazyload = function(options) {
     20        var elements = this;
     21        var $container;
    1822        var settings = {
    19             threshold    : 0,
    20             failurelimit : 0,
    21             event        : "scroll",
    22             effect       : "show",
    23             container    : window
     23            threshold       : 0,
     24            failure_limit   : 0,
     25            event           : "scroll",
     26            effect          : "show",
     27            container       : window,
     28            data_attribute  : "original",
     29            skip_invisible  : false,
     30            appear          : null,
     31            load            : null,
     32            placeholder     : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
    2433        };
    25                
     34
     35        function update() {
     36            var counter = 0;
     37
     38            elements.each(function() {
     39                var $this = $(this);
     40                if (settings.skip_invisible && !$this.is(":visible")) {
     41                    return;
     42                }
     43                if ($.abovethetop(this, settings) ||
     44                    $.leftofbegin(this, settings)) {
     45                        /* Nothing. */
     46                } else if (!$.belowthefold(this, settings) &&
     47                    !$.rightoffold(this, settings)) {
     48                        $this.trigger("appear");
     49                        /* if we found an image we'll load, reset the counter */
     50                        counter = 0;
     51                } else {
     52                    if (++counter > settings.failure_limit) {
     53                        return false;
     54                    }
     55                }
     56            });
     57
     58        }
     59
    2660        if(options) {
     61            /* Maintain BC for a couple of versions. */
     62            if (undefined !== options.failurelimit) {
     63                options.failure_limit = options.failurelimit;
     64                delete options.failurelimit;
     65            }
     66            if (undefined !== options.effectspeed) {
     67                options.effect_speed = options.effectspeed;
     68                delete options.effectspeed;
     69            }
     70
    2771            $.extend(settings, options);
    2872        }
    2973
     74        /* Cache container as jQuery as object. */
     75        $container = (settings.container === undefined ||
     76                      settings.container === window) ? $window : $(settings.container);
     77
    3078        /* Fire one scroll event per scroll. Not one scroll event per image. */
    31         var elements = this;
    32         if ("scroll" == settings.event) {
    33             $(settings.container).bind("scroll", function(event) {
    34                
    35                 var counter = 0;
    36                 elements.each(function() {
    37                     if ($.abovethetop(this, settings) ||
    38                         $.leftofbegin(this, settings)) {
    39                             /* Nothing. */
    40                     } else if (!$.belowthefold(this, settings) &&
    41                         !$.rightoffold(this, settings)) {
    42                             $(this).trigger("appear");
    43                     } else {
    44                         if (counter++ > settings.failurelimit) {
    45                             return false;
    46                         }
     79        if (0 === settings.event.indexOf("scroll")) {
     80            $container.on(settings.event, function() {
     81                return update();
     82            });
     83        }
     84
     85        this.each(function() {
     86            var self = this;
     87            var $self = $(self);
     88
     89            self.loaded = false;
     90
     91            /* If no src attribute given use data:uri. */
     92            if ($self.attr("src") === undefined || $self.attr("src") === false) {
     93                if ($self.is("img")) {
     94                    $self.attr("src", settings.placeholder);
     95                }
     96            }
     97
     98            /* When appear is triggered load original image. */
     99            $self.one("appear", function() {
     100                if (!this.loaded) {
     101                    if (settings.appear) {
     102                        var elements_left = elements.length;
     103                        settings.appear.call(self, elements_left, settings);
     104                    }
     105                    $("<img />")
     106                        .one("load", function() {
     107                            var original = $self.attr("data-" + settings.data_attribute);
     108                            $self.hide();
     109                            if ($self.is("img")) {
     110                                $self.attr("src", original);
     111                            } else {
     112                                $self.css("background-image", "url('" + original + "')");
     113                            }
     114                            $self[settings.effect](settings.effect_speed);
     115
     116                            self.loaded = true;
     117
     118                            /* Remove image from array so it is not looped next time. */
     119                            var temp = $.grep(elements, function(element) {
     120                                return !element.loaded;
     121                            });
     122                            elements = $(temp);
     123
     124                            if (settings.load) {
     125                                var elements_left = elements.length;
     126                                settings.load.call(self, elements_left, settings);
     127                            }
     128                        })
     129                        .attr("src", $self.attr("data-" + settings.data_attribute));
     130                }
     131            });
     132
     133            /* When wanted event is triggered load original image */
     134            /* by triggering appear.                              */
     135            if (0 !== settings.event.indexOf("scroll")) {
     136                $self.on(settings.event, function() {
     137                    if (!self.loaded) {
     138                        $self.trigger("appear");
    47139                    }
    48140                });
    49                 /* Remove image from array so it is not looped next time. */
    50                 var temp = $.grep(elements, function(element) {
    51                     return !element.loaded;
    52                 });
    53                 elements = $(temp);
    54             });
    55         }
    56        
    57         this.each(function() {
    58             var self = this;
    59            
    60             /* Save original only if it is not defined in HTML. */
    61             if (undefined == $(self).attr("original")) {
    62                 $(self).attr("original", $(self).attr("src"));     
    63             }
    64 
    65             if ("scroll" != settings.event ||
    66                     undefined == $(self).attr("src") ||
    67                     settings.placeholder == $(self).attr("src") ||
    68                     ($.abovethetop(self, settings) ||
    69                      $.leftofbegin(self, settings) ||
    70                      $.belowthefold(self, settings) ||
    71                      $.rightoffold(self, settings) )) {
    72                        
    73                 if (settings.placeholder) {
    74                     $(self).attr("src", settings.placeholder);     
    75                 } else {
    76                     $(self).removeAttr("src");
    77                 }
    78                 self.loaded = false;
    79             } else {
    80                 self.loaded = true;
    81             }
    82            
    83             /* When appear is triggered load original image. */
    84             $(self).one("appear", function() {
    85                 if (!this.loaded) {
    86                     $("<img />")
    87                         .bind("load", function() {
    88                             $(self)
    89                                 .hide()
    90                                 .attr("src", $(self).attr("original"))
    91                                 [settings.effect](settings.effectspeed);
    92                             self.loaded = true;
    93                         })
    94                         .attr("src", $(self).attr("original"));
    95                 };
    96             });
    97 
    98             /* When wanted event is triggered load original image */
    99             /* by triggering appear.                              */
    100             if ("scroll" != settings.event) {
    101                 $(self).bind(settings.event, function(event) {
    102                     if (!self.loaded) {
    103                         $(self).trigger("appear");
    104                     }
    105                 });
    106141            }
    107142        });
    108        
     143
     144        /* Check if something appears when window is resized. */
     145        $window.on("resize", function() {
     146            update();
     147        });
     148
     149        /* With IOS5 force loading images when navigating with back button. */
     150        /* Non optimal workaround. */
     151        if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) {
     152            $window.on("pageshow", function(event) {
     153                if (event.originalEvent && event.originalEvent.persisted) {
     154                    elements.each(function() {
     155                        $(this).trigger("appear");
     156                    });
     157                }
     158            });
     159        }
     160
    109161        /* Force initial check if images should appear. */
    110         $(settings.container).trigger(settings.event);
    111        
     162        $(document).ready(function() {
     163            update();
     164        });
     165
    112166        return this;
    113 
    114167    };
    115168
     
    118171
    119172    $.belowthefold = function(element, settings) {
    120         if (settings.container === undefined || settings.container === window) {
    121             var fold = $(window).height() + $(window).scrollTop();
    122         } else {
    123             var fold = $(settings.container).offset().top + $(settings.container).height();
    124         }
     173        var fold;
     174
     175        if (settings.container === undefined || settings.container === window) {
     176            fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop();
     177        } else {
     178            fold = $(settings.container).offset().top + $(settings.container).height();
     179        }
     180
    125181        return fold <= $(element).offset().top - settings.threshold;
    126182    };
    127    
     183
    128184    $.rightoffold = function(element, settings) {
    129         if (settings.container === undefined || settings.container === window) {
    130             var fold = $(window).width() + $(window).scrollLeft();
    131         } else {
    132             var fold = $(settings.container).offset().left + $(settings.container).width();
    133         }
     185        var fold;
     186
     187        if (settings.container === undefined || settings.container === window) {
     188            fold = $window.width() + $window.scrollLeft();
     189        } else {
     190            fold = $(settings.container).offset().left + $(settings.container).width();
     191        }
     192
    134193        return fold <= $(element).offset().left - settings.threshold;
    135194    };
    136        
     195
    137196    $.abovethetop = function(element, settings) {
    138         if (settings.container === undefined || settings.container === window) {
    139             var fold = $(window).scrollTop();
    140         } else {
    141             var fold = $(settings.container).offset().top;
    142         }
     197        var fold;
     198
     199        if (settings.container === undefined || settings.container === window) {
     200            fold = $window.scrollTop();
     201        } else {
     202            fold = $(settings.container).offset().top;
     203        }
     204
    143205        return fold >= $(element).offset().top + settings.threshold  + $(element).height();
    144206    };
    145    
     207
    146208    $.leftofbegin = function(element, settings) {
    147         if (settings.container === undefined || settings.container === window) {
    148             var fold = $(window).scrollLeft();
    149         } else {
    150             var fold = $(settings.container).offset().left;
    151         }
     209        var fold;
     210
     211        if (settings.container === undefined || settings.container === window) {
     212            fold = $window.scrollLeft();
     213        } else {
     214            fold = $(settings.container).offset().left;
     215        }
     216
    152217        return fold >= $(element).offset().left + settings.threshold + $(element).width();
    153218    };
     219
     220    $.inviewport = function(element, settings) {
     221         return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
     222                !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
     223     };
     224
    154225    /* Custom selectors for your convenience.   */
    155     /* Use as $("img:below-the-fold").something() */
    156 
    157     $.extend($.expr[':'], {
    158         "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
    159         "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
    160         "right-of-fold"  : "$.rightoffold(a, {threshold : 0, container: window})",
    161         "left-of-fold"   : "!$.rightoffold(a, {threshold : 0, container: window})"
     226    /* Use as $("img:below-the-fold").something() or */
     227    /* $("img").filter(":below-the-fold").something() which is faster */
     228
     229    $.extend($.expr[":"], {
     230        "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },
     231        "above-the-top"  : function(a) { return !$.belowthefold(a, {threshold : 0}); },
     232        "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },
     233        "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },
     234        "in-viewport"    : function(a) { return $.inviewport(a, {threshold : 0}); },
     235        /* Maintain BC for couple of versions. */
     236        "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
     237        "right-of-fold"  : function(a) { return $.rightoffold(a, {threshold : 0}); },
     238        "left-of-fold"   : function(a) { return !$.rightoffold(a, {threshold : 0}); }
    162239    });
    163    
    164 })(jQuery);
     240
     241})(jQuery, window, document);
  • _plugins_/jquery_lazyload/trunk/lazyload_pipelines.php

    r76560 r104116  
    66        if (function_exists('lire_config')) {
    77               
    8                 $selecteur = lire_config("lazyload/selecteur","#contenu img");
     8                $selecteur = lire_config("lazyload/selecteur","img");
    99                $distance = lire_config("lazyload/distance","0");
    1010                $event = lire_config("lazyload/event");
     
    1414                if ($effect != "")
    1515                        $effect = 'effect : "'.$effect.'",';
    16                
     16                $flux .= '<style>.lazy { display: none }</style>';
    1717                $flux .= '<script type="text/javascript" src="'._DIR_PLUGIN_LAZYLOAD.'javascript/jquery.lazyload.js"></script>';
    1818                $flux .= '<script type="text/javascript">
    1919                                        $(function(){
    20                                                 $("'.$selecteur.'").lazyload({
     20                                                $("'.$selecteur.'.lazy").show().lazyload({
    2121                                                        threshold : '.$distance.',
    2222                                                        placeholder : "'._DIR_PLUGIN_LAZYLOAD.'images/grey.gif",
     
    2929        return $flux;
    3030}
     31function lazyload_insert_head_prive($flux){
     32        $flux .= '<style>.lazy { display: none; }</style>';
     33        $flux .= '<script type="text/javascript" src="'._DIR_PLUGIN_LAZYLOAD.'javascript/jquery.lazyload.js"></script>';
     34        $flux .= '<script type="text/javascript">$(function(){ $("img.lazy").show().lazyload(); });</script>';
     35        return $flux;
     36}
    3137
    3238?>
  • _plugins_/jquery_lazyload/trunk/plugin.xml

    r103720 r104116  
    22        <nom>jQuery Lazy Load</nom>
    33        <auteur>b_b</auteur>
    4         <version>1.0.0</version>
    5         <etat>stable</etat>
     4        <version>1.1.0</version>
     5        <etat>test</etat>
    66        <description>
    77        Ce plugin permet d'utiliser le script jQuery Lazy Load dans les pages publiques de votre site.
     
    1616                <inclure>lazyload_pipelines.php</inclure>
    1717        </pipeline>
    18         <necessite id="SPIP" version="[2.1.0;3.0.99]" />
     18        <pipeline>
     19                <nom>header_prive</nom>
     20                <action>insert_head_prive</action>
     21                <inclure>lazyload_pipelines.php</inclure>
     22        </pipeline>
     23        <necessite id="SPIP" version="[2.1.0;3.2.99]" />
    1924        <utilise id="spip_bonux" version="[2.3.1;]" />
     25        <utilise id="medias" version="[1.0.1;[" />
    2026        <categorie>multimedia</categorie>
    2127</plugin>
Note: See TracChangeset for help on using the changeset viewer.