source: spip-zone/_plugins_/lazysizes/trunk/README.md @ 104282

Last change on this file since 104282 was 104282, checked in by arnaud.berard@…, 3 years ago

Ajout liste des addons doc et @todo

  • Property svn:eol-style set to native
File size: 4.5 KB
Line 
1# LazySizes pour spip
2
3
4Intégration pour spip du script lazysize.
5
6Outil / lib de lazyloading extensible via un système de plugin/addons.
7
8Permet notamment de déférer le téléchargement de ressources (images, iframes, vidéos, ..) de manière a ce que l'utilisateur
9ne 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
17Polyfill alternatif léger pour les images responsives (picture et image src-set).
18
19### OPTIMUMX plugin
20
21The srcset attribute with the w descriptor and sizes attribute
22automatically also includes high DPI images.
23But each image has a different optimal pixel density,
24which might be lower (for example 1.5x) than the pixel density
25of your device (2x or 3x).
26This information is unknown to the browser and
27therefore 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
31The object fit plugin polyfills the object-fit and the object-position property in non supporting browsers.
32
33### unveilhooks plugin
34
35The unveilhooks plugin plugin enables lazySizes to lazyload background images, widgets/components/scripts, styles and video/audio elements.
36
37### include plugin
38
39The 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
43The 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
47lazySizes 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
51In case you are changing the data-src/data-srcset attributes
52of already transformed lazyload elements, you must normally also re-add the lazyload class to the element.
53
54This attrchange / re-initialization extension automatically
55detects changes to your data-* attributes and adds the class for you.
56
57### parent-fit extension
58
59The 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
63The unload extends lazysizes to unload not in view images to improve memory
64consumption and orientationchange/resize performance.
65
66### noscript extension
67
68The noscript extension is the ultimate progressive enhancement
69extension for lazySizes. It allows you to transform any HTML
70inside a noscript element as soon as it becomes visible.
71
72### aspectratio extension
73
74The aspectratio extension allows you to control the aspectratio
75of your images using markup instead of CSS. It is an alternative
76for the CSS intrinsic ratio technique.
77
78### print plugin
79
80The print plugin plugin enables lazySizes to unveil all elements
81as soon as the user starts to print.
82(Or set lazySizesConfig.preloadAfterLoad to true).
83
84### progressive plugin
85
86The progressive plugin adds better support for rendering progressive jpgs/pngs.
87
88### RIaS plugin - (Responsive Images as a Service / Responsive image on demand)
89
90The RIaS plugin is a neat full responsive images solution
91without the need of any additional plugins/polyfills.
92
93It enables lazySizes to generate the best suitable
94image source based on an URL pattern.
95It works with pre-build images (i.e. grunt-responsive-images)
96as also with any third party (ReSrc, Pixtulate, mobify, WURFL's Image Tailor ...)
97or self hosted restful responsive image service (responsive image on demand).
98It makes responsive images even more easier without any need for another third party script.
99
100
101## Sources et docs
102
103https://github.com/aFarkas/lazysizes
104
105
106## @todo
107
108
109- [X] Inclure les plugins lazysize depuis un panneau de config ou un define
110puis 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
Note: See TracBrowser for help on using the repository browser.