Changeset 112214 in spip-zone


Ignore:
Timestamp:
Oct 30, 2018, 1:35:14 PM (7 months ago)
Author:
arnaud.berard@…
Message:

Maj de la lib en v4.1.4
l'auteur n'étant pas très verbeux sur les changelogs se referer a la diff et aux readme contenus dans les addons

dans mon cas c'était des correctifs sur bgset qui m'interressait…

on note l'ajout d'un nouveau addon :
blur-up :
Ajoutez simplement un attribut data-lowsrc avec l'image d'espace réservé image de qualité loq à votre img et dans le cas où picture à vos éléments source.

Lazysizes créera ensuite une nouvelle image juste après votre image d'origine avec la classe suivante ls-blur-up-img.

La nouvelle image (ls-blur-up-img) obtiendra les classes d'état suivantes pour vous permettre d'écrire une animation / transition CSS personnalisée dès que l'image sera visible et chargée: ls-inview / ls -original-chargé.

Location:
_plugins_/lazysizes/trunk/javascript
Files:
3 added
8 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/lazysizes/trunk/javascript/addons/attrchange/ls.attrchange.js

    r105556 r112214  
    3434                                }
    3535                                lazySizes.aC(target, lsCfg.lazyClass);
     36
     37                                if(target.style.display == 'none' || (target.parentNode && target.parentNode.style.display == 'none')){
     38                                        setTimeout(function () {
     39                                                lazySizes.loader.unveil(target);
     40                                        }, 0);
     41                                }
    3642                        });
    3743                };
  • _plugins_/lazysizes/trunk/javascript/addons/bgset/README.md

    r105556 r112214  
    44
    55The extension will then load the best image size for the current viewport and device. In case the browser does not support responsive images natively either picturefill or the [respimg polyfill plugin](../respimg) has to be used:
     6
     7Note: This plugin is deprecated in most cases. Check wether the object-fit CSS property in combination with the [object-fit polyfill](../object-fit) is better for your needs.
    68
    79```html
     
    4042<!-- or without customMedia options: -->
    4143<div class="lazyload" data-bgset="image-200.jpg [(max-width: 480px)] | image-300.jpg [(max-width: 700px)] | image-400.jpg"></div>
     44<!-- or with type attribute: -->
     45<div class="lazyload" data-bgset="logo.svg [type: image/svg+xml] | logo.png"></div>
    4246```
    4347
     
    5256Here you find a [small bgset demo](http://jsfiddle.net/trixta/bfqqnosp/embedded/result/).
    5357
    54 **Note: In case you use this plugin with ``background-size: cover|contain`` and the ``data-sizes="auto"`` feature, we recommend to also use the [parent-fit extension](../parent-fit/) to calculate the right ``sizes`` attribute for you. See also the following [demo](http://jsfiddle.net/trixta/w96o9xm5/). Also have a look into the [object-fit polyfill plugin](../object-fit).**
     58**Note: In case you use this plugin with ``background-size: cover|contain`` and the ``data-sizes="auto"`` feature, we recommend to also use the [parent-fit extension](../parent-fit/) to calculate the right ``sizes`` attribute for you. See also the following [demo](http://jsfiddle.net/trixta/w96o9xm5/). In these cases the [object-fit polyfill plugin](../object-fit) should be a better option than bgset.**
  • _plugins_/lazysizes/trunk/javascript/addons/bgset/ls.bgset.js

    r110469 r112214  
    2020        var regWhite = /\s+/g;
    2121        var regSplitSet = /\s*\|\s+|\s+\|\s*/g;
    22         var regSource = /^(.+?)(?:\s+\[\s*(.+?)\s*\])?$/;
     22        var regSource = /^(.+?)(?:\s+\[\s*(.+?)\s*\])(?:\s+\[\s*(.+?)\s*\])?$/;
     23        var regType = /^\s*\(*\s*type\s*:\s*(.+?)\s*\)*\s*$/;
    2324        var regBgUrlEscape = /\(|\)|'/;
    2425        var allowedBackgroundSize = {contain: 1, cover: 1};
     
    4142
    4243                return bgSize;
     44        };
     45        var setTypeOrMedia = function(source, match){
     46                if(match){
     47                        var typeMatch = match.match(regType);
     48                        if(typeMatch && typeMatch[1]){
     49                                source.setAttribute('type', typeMatch[1]);
     50                        } else {
     51                                source.setAttribute('media', lazySizesConfig.customMedia[match] || match);
     52                        }
     53                }
    4354        };
    4455        var createPicture = function(sets, elem, img){
     
    8091                        if((match = set.match(regSource))){
    8192                                source.setAttribute(lazySizesConfig.srcsetAttr, match[1]);
    82                                 if(match[2]){
    83                                         source.setAttribute('media', lazySizesConfig.customMedia[match[2]] || match[2]);
    84                                 }
     93
     94                                setTypeOrMedia(source, match[2]);
     95                                setTypeOrMedia(source, match[3]);
     96                        } else {
     97                                source.setAttribute(lazySizesConfig.srcsetAttr, set);
    8598                        }
     99
    86100                        picture.appendChild(source);
    87101                });
     
    111125                var bg = image.currentSrc || image.src;
    112126
     127
    113128                if(bg){
    114                         elem.style.backgroundImage = 'url(' + (regBgUrlEscape.test(bg) ? JSON.stringify(bg) : bg ) + ')';
     129                        var event = lazySizes.fire(elem, 'bgsetproxy', {
     130                                src: bg,
     131                                useSrc: regBgUrlEscape.test(bg) ? JSON.stringify(bg) : bg,
     132                        });
     133
     134                        if(!event.defaultPrevented){
     135                                elem.style.backgroundImage = 'url(' + event.detail.useSrc + ')';
     136                        }
    115137                }
    116138
  • _plugins_/lazysizes/trunk/javascript/addons/include/ls.include.js

    r110469 r112214  
    2727        var config, includeConfig, baseContentElement, basePseudos;
    2828        var regSplitCan = /\s*,+\s+/;
     29        var cssComplete = {complete: 1, loaded: 1};
    2930        var uniqueUrls = {};
    3031        var regWhite = /\s+/;
     
    340341        }
    341342
     343        function isStyleReady(link){
     344                var ready = false;
     345                var sheets = document.styleSheets;
     346                var href = link.href;
     347
     348                for(var i = 0, length = sheets.length; i < length; i++){
     349                        if(sheets[i].href == href){
     350                                ready = true;
     351                                break;
     352                        }
     353                }
     354
     355
     356                return ready;
     357        }
     358
    342359        function loadStyleScript(url, isScript, cb){
    343360                if(!uniqueUrls[url]){
     
    352369                                elem.href = url;
    353370                        }
     371
     372                        uniqueUrls[url] = [];
     373                        uniqueUrls[elem.href] = true;
     374
     375                        if(cb){
     376                                var timer;
     377                                var load = function(e){
     378                                        if(e.type == 'readystatechange' && !cssComplete[e.target.readyState]){return;}
     379
     380                                        var cbs = uniqueUrls[url];
     381
     382                                        elem.removeEventListener('load', load);
     383                                        elem.removeEventListener('error', load);
     384                                        elem.removeEventListener('readystatechange', load);
     385                                        elem.removeEventListener('loadcssdefined', load);
     386
     387                                        if(timer){
     388                                                clearInterval(timer);
     389                                        }
     390
     391                                        uniqueUrls[url] = true;
     392
     393                                        while(cbs.length){
     394                                                cbs.shift()();
     395                                        }
     396                                };
     397
     398                                if(!isScript){
     399                                        timer = setInterval(function(){
     400                                                if(isStyleReady(elem)){
     401                                                        load({});
     402                                                }
     403                                        }, 60);
     404                                }
     405
     406                                elem.addEventListener('load', load);
     407                                elem.addEventListener('error', load);
     408                                elem.addEventListener('readystatechange', load);
     409                                elem.addEventListener('loadcssdefined', load);
     410
     411                                uniqueUrls[url][0] = cb;
     412                        }
     413
    354414                        insertElem.parentNode.insertBefore(elem, insertElem);
    355                         uniqueUrls[url] = true;
    356                         uniqueUrls[elem.href] = true;
    357                 }
    358         }
    359 
    360         function loadStyles(urls){
     415                } else if(cb){
     416                        if(uniqueUrls[url] === true){
     417                                setTimeout(cb);
     418                        } else {
     419                                uniqueUrls[url].push(cb);
     420                        }
     421                }
     422        }
     423
     424        function loadStyles(urls, cb){
    361425                urls = urls.split('|,|');
    362                 urls.forEach(loadStyleScript);
     426
     427                var last = urls.length - 1;
     428
     429                urls.forEach(function(url, index){
     430                        loadStyleScript(url, false, index == last ? cb : null);
     431                });
    363432        }
    364433
     
    385454
    386455        function loadCandidate(elem, candidate){
    387                 var include, xhrObj, modules;
     456                var include, xhrObj, modules, waitCss, runInclude;
    388457                var old = elem.lazyInclude.current || null;
    389458                var detail = {
     
    401470                        return;
    402471                }
     472
     473                runInclude = function(){
     474                        if(xhrObj && modules && !waitCss){
     475                                include();
     476                        }
     477                };
    403478
    404479                include = function(){
     
    456531
    457532                if(candidate.urls.css){
    458                         loadStyles(candidate.urls.css);
     533                        waitCss = true;
     534                        loadStyles(candidate.urls.css, function () {
     535                                waitCss = false;
     536                                runInclude();
     537                        });
    459538                }
    460539                if(detail.content == null && candidate.urls.include){
    461540                        loadInclude(detail, function(data){
    462541                                xhrObj = data;
    463                                 if(modules){
    464                                         include();
    465                                 }
     542                                runInclude();
    466543                        });
    467544                } else {
     
    472549                        var loadRequireImportCB = function(){
    473550                                modules = Array.prototype.slice.call(arguments);
    474                                 if(xhrObj){
    475                                         include();
    476                                 }
     551                                runInclude();
    477552                        };
    478553
     
    487562                }
    488563
    489                 if(xhrObj && modules){
    490                         include();
    491                 }
     564                runInclude();
    492565        }
    493566
  • _plugins_/lazysizes/trunk/javascript/addons/object-fit/README.md

    r110469 r112214  
    66
    77### Include JS files:
    8 Include lazysizes and lazysizes object fit and optionally lazysizes parent-fit and lazysizes respimg plugin. Lazysizes object-fit and respimg plugin are only needed in browser that don't support object fit or responsive images. Lazysizes parent-fit is recommended if you use object fit responsive images in combination with `data-sizes="auto"`.
     8Include lazysizes and lazysizes object fit and optionally lazysizes [parent-fit](../parent-fit) and lazysizes respimg plugin. Lazysizes object-fit and respimg plugin are only needed in browser that don't support object fit or responsive images. Lazysizes parent-fit is recommended if you use object fit responsive images in combination with `data-sizes="auto"`.
    99
    1010```html
  • _plugins_/lazysizes/trunk/javascript/addons/parent-fit/README.md

    r105556 r112214  
    55## Usage
    66
    7 For this to work properly the physical aspect-ratio of the image candidates need to be calculable. To do so at least one of the image candidates inside the ``srcset`` attribute also need to include a **h** (height) descriptor for at least one image candidate in each `srcset`.
     7For this to work properly the physical aspect-ratio of the image candidates need to be calculable. To do so either a `data-aspectratio` attribute has to be provided on the `source`/`img` element(s) or at least one of the image candidates inside the ``srcset`` attribute also need to include a **h** (height) descriptor. (MS Edge has problems to read image candidates using the h descriptor, which is fixed by the [respimg polyfill](../respimg))
    88
    99### object-fit: contain|cover usage
    1010
    11 Simply include this plugin, combine your width descriptors with height descriptors and use ``object-fit``.
     11Simply include this plugin, combine your width descriptors with height descriptors and use ``object-fit``. (To get object-fit support into IE9-11 use the [object-fit polyfill](../object-fit).)
    1212
    1313```html
     14<!-- Usage of the data-aspectratio attribute: Divide width by height: 400/800 = data-aspectratio="0.5" -->
     15
     16<img data-srcset="http://lorempixel.com/400/800/people/6/ 400w,
     17        http://lorempixel.com/300/600/people/6/ 300w,
     18        http://lorempixel.com/200/400/people/6/ 200w"
     19        data-aspectratio="0.5"
     20         data-sizes="auto"
     21         class="lazyload"
     22         style="width: 400px; height: 400px; object-fit: contain;" />
     23
     24<!-- Usage of the h descriptor -->
     25
    1426<img data-srcset="http://lorempixel.com/400/800/people/6/ 400w 800h,
    1527        http://lorempixel.com/300/600/people/6/ 300w,
     
    2537         class="lazyload"
    2638         style="width: 400px; height: 400px; object-fit: cover;" />
     39
     40
    2741```
     42
     43
    2844
    2945### [data-parent-fit="contain|cover|width"] usage
    3046
    31 Due to the fact, that object-fit isn't supported in IE11. This plugin also supports calculating height and width constrained images based on the parent element.
     47This plugin also supports calculating height and width constrained images based on a parent element.
    3248
    3349To do so include this plugin, combine your width descriptors with height descriptors and add the attribute ``data-parent-fit`` with either ``"contain"`` or ``"cover"`` as the keyword.
  • _plugins_/lazysizes/trunk/javascript/addons/respimg/ls.respimg.js

    r110469 r112214  
    2626                var forEach = Array.prototype.forEach;
    2727
    28                 return function(edgeMatch){
     28                return function(){
    2929                        var img = document.createElement('img');
    3030                        var removeHDescriptors = function(source){
     
    6161                        };
    6262
    63                         if(edgeMatch[1]){
    64                                 document.addEventListener('lazybeforeunveil', handler);
    65 
    66                                 if(true || edgeMatch[1] > 14){
    67                                         img.onload = test;
    68                                         img.onerror = test;
    69 
    70                                         img.srcset = 'data:,a 1w 1h';
    71 
    72                                         if(img.complete){
    73                                                 test();
    74                                         }
    75                                 }
     63                        document.addEventListener('lazybeforeunveil', handler);
     64
     65                        img.onload = test;
     66                        img.onerror = test;
     67
     68                        img.srcset = 'data:,a 1w 1h';
     69
     70                        if(img.complete){
     71                                test();
    7672                        }
    7773                };
  • _plugins_/lazysizes/trunk/javascript/lazysizes.js

    r110469 r112214  
    6969
    7070        var triggerEvent = function(elem, name, detail, noBubbles, noCancelable){
    71                 var event = document.createEvent('CustomEvent');
     71                var event = document.createEvent('Event');
    7272
    7373                if(!detail){
     
    7777                detail.instance = lazysizes;
    7878
    79                 event.initCustomEvent(name, !noBubbles, !noCancelable, detail);
     79                event.initEvent(name, !noBubbles, !noCancelable);
     80
     81                event.detail = detail;
    8082
    8183                elem.dispatchEvent(event);
     
    8688                var polyfill;
    8789                if( !supportPicture && ( polyfill = (window.picturefill || lazySizesConfig.pf) ) ){
     90                        if(full && full.src && !el[_getAttribute]('srcset')){
     91                                el.setAttribute('srcset', full.src);
     92                        }
    8893                        polyfill({reevaluate: true, elements: [el]});
    8994                } else if(full && full.src){
     
    291296                var regIframe = /^iframe$/i;
    292297
    293                 var supportScroll = ('onscroll' in window) && !(/glebot/.test(navigator.userAgent));
     298                var supportScroll = ('onscroll' in window) && !(/(gle|ing)bot/.test(navigator.userAgent));
    294299
    295300                var shrinkExpand = 0;
     
    313318                        var outerRect;
    314319                        var parent = elem;
    315                         var visible = getCSS(document.body, 'visibility') == 'hidden' || getCSS(elem, 'visibility') != 'hidden';
     320                        var visible = getCSS(document.body, 'visibility') == 'hidden' || (getCSS(elem.parentNode, 'visibility') != 'hidden' && getCSS(elem, 'visibility') != 'hidden');
    316321
    317322                        eLtop -= elemExpand;
Note: See TracChangeset for help on using the changeset viewer.