| 1 | # LazySizes pour spip |
|---|
| 2 | |
|---|
| 3 | |
|---|
| 4 | Intégration pour spip du script lazysize. |
|---|
| 5 | |
|---|
| 6 | Outil / lib de lazyloading extensible via un système de plugin/addons. |
|---|
| 7 | |
|---|
| 8 | Permet notamment de déférer le téléchargement de ressources (images, iframes, vidéos, ..) de manière a ce que l'utilisateur |
|---|
| 9 | ne charge que ce qui est visible dans la fenetre de navigation, ou quand on souhaite sur un autre évenement via un sytème de hooks. |
|---|
| 10 | |
|---|
| 11 | |
|---|
| 12 | |
|---|
| 13 | ## Addons : |
|---|
| 14 | |
|---|
| 15 | ### respimg polyfill plugin |
|---|
| 16 | |
|---|
| 17 | Polyfill alternatif léger pour les images responsives (picture et image src-set). |
|---|
| 18 | |
|---|
| 19 | ### OPTIMUMX plugin |
|---|
| 20 | |
|---|
| 21 | The srcset attribute with the w descriptor and sizes attribute |
|---|
| 22 | automatically also includes high DPI images. |
|---|
| 23 | But each image has a different optimal pixel density, |
|---|
| 24 | which might be lower (for example 1.5x) than the pixel density |
|---|
| 25 | of your device (2x or 3x). |
|---|
| 26 | This information is unknown to the browser and |
|---|
| 27 | therefore can't be optimized for. The lazySizes optimumx extension gives you more control to trade between perceived quality vs. perceived performance. |
|---|
| 28 | |
|---|
| 29 | ### object-fit extension |
|---|
| 30 | |
|---|
| 31 | The object fit plugin polyfills the object-fit and the object-position property in non supporting browsers. |
|---|
| 32 | |
|---|
| 33 | ### unveilhooks plugin |
|---|
| 34 | |
|---|
| 35 | The unveilhooks plugin plugin enables lazySizes to lazyload background images, widgets/components/scripts, styles and video/audio elements. |
|---|
| 36 | |
|---|
| 37 | ### include plugin |
|---|
| 38 | |
|---|
| 39 | The include plugin plugin enables lazySizes to lazyload content, styles or AMD modules either simply postponed or conditionally (for example matching certain media queries). This extension also heavily simplifies the architecture of conditional, dynamically changing responsive behavior and has great scalability. |
|---|
| 40 | |
|---|
| 41 | ### bgset plugin - lazy responsive background-image |
|---|
| 42 | |
|---|
| 43 | The bgset plugin allows lazyloading of multiple background images with different resolutions/sizes and/or media queries (responsive background images). In case you only need one image use the unveilhooks extension. |
|---|
| 44 | |
|---|
| 45 | ### lazysizes custommedia extension |
|---|
| 46 | |
|---|
| 47 | lazySizes custommedia extension allows you to automatically sync and manage your breakpoints between your CSS and the media attributes of your "picture > source" elements using the customMedia option of lazySizes. |
|---|
| 48 | |
|---|
| 49 | ### attrchange / re-initialization extension |
|---|
| 50 | |
|---|
| 51 | In case you are changing the data-src/data-srcset attributes |
|---|
| 52 | of already transformed lazyload elements, you must normally also re-add the lazyload class to the element. |
|---|
| 53 | |
|---|
| 54 | This attrchange / re-initialization extension automatically |
|---|
| 55 | detects changes to your data-* attributes and adds the class for you. |
|---|
| 56 | |
|---|
| 57 | ### parent-fit extension |
|---|
| 58 | |
|---|
| 59 | The parent fit plugin extends the data-sizes="auto" feature to also calculate the right sizes for object-fit: contain|cover image elements and other height ( and width) constrained image elements in general. |
|---|
| 60 | |
|---|
| 61 | ### unload extension |
|---|
| 62 | |
|---|
| 63 | The unload extends lazysizes to unload not in view images to improve memory |
|---|
| 64 | consumption and orientationchange/resize performance. |
|---|
| 65 | |
|---|
| 66 | ### noscript extension |
|---|
| 67 | |
|---|
| 68 | The noscript extension is the ultimate progressive enhancement |
|---|
| 69 | extension for lazySizes. It allows you to transform any HTML |
|---|
| 70 | inside a noscript element as soon as it becomes visible. |
|---|
| 71 | |
|---|
| 72 | ### aspectratio extension |
|---|
| 73 | |
|---|
| 74 | The aspectratio extension allows you to control the aspectratio |
|---|
| 75 | of your images using markup instead of CSS. It is an alternative |
|---|
| 76 | for the CSS intrinsic ratio technique. |
|---|
| 77 | |
|---|
| 78 | ### print plugin |
|---|
| 79 | |
|---|
| 80 | The print plugin plugin enables lazySizes to unveil all elements |
|---|
| 81 | as soon as the user starts to print. |
|---|
| 82 | (Or set lazySizesConfig.preloadAfterLoad to true). |
|---|
| 83 | |
|---|
| 84 | ### progressive plugin |
|---|
| 85 | |
|---|
| 86 | The progressive plugin adds better support for rendering progressive jpgs/pngs. |
|---|
| 87 | |
|---|
| 88 | ### RIaS plugin - (Responsive Images as a Service / Responsive image on demand) |
|---|
| 89 | |
|---|
| 90 | The RIaS plugin is a neat full responsive images solution |
|---|
| 91 | without the need of any additional plugins/polyfills. |
|---|
| 92 | |
|---|
| 93 | It enables lazySizes to generate the best suitable |
|---|
| 94 | image source based on an URL pattern. |
|---|
| 95 | It works with pre-build images (i.e. grunt-responsive-images) |
|---|
| 96 | as also with any third party (ReSrc, Pixtulate, mobify, WURFL's Image Tailor ...) |
|---|
| 97 | or self hosted restful responsive image service (responsive image on demand). |
|---|
| 98 | It makes responsive images even more easier without any need for another third party script. |
|---|
| 99 | |
|---|
| 100 | |
|---|
| 101 | ## Sources et docs |
|---|
| 102 | |
|---|
| 103 | https://github.com/aFarkas/lazysizes |
|---|
| 104 | |
|---|
| 105 | |
|---|
| 106 | ## @todo |
|---|
| 107 | |
|---|
| 108 | |
|---|
| 109 | - [X] Inclure les plugins lazysize depuis un panneau de config ou un define |
|---|
| 110 | puis les charger dans insert_head |
|---|
| 111 | - [X] config export ie_config() |
|---|
| 112 | - [] traduire la doc |
|---|
| 113 | - [] Ajouter via define ou config les options de configuration |
|---|
| 114 | - [] surcharger les modèles media, interressant a "lazyloader" |
|---|
| 115 | - [] Chaines de langue, et docs/aide des addons |
|---|
