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

Last change on this file since 110469 was 110469, checked in by arnaud.berard@…, 13 months ago

mise a jour de la lib en 4.0.2

nettoyage des fichiers minifiés inutiles dans le plugins spip

  • Property svn:eol-style set to native
File size: 8.1 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
11Lazysizes est un script de lazyloading rapide et sans dépendance a un framework d'images
12(incluant les images responsives picture/srcset), les iframes, les scripts/widgets, …
13Il agit sur la priorité des pré-chargement en différenciant les éléments
14suivant la distance plus ou moins importante du champ visible, afin d'augmenter l'impression de rapidité.
15
16LazySizes peut aussi devenir votre outil numéro 1 pour intégrer à votre site les images responsive.
17
18LazySizes peut calculer automatiquement la taille et le ratio de vos images.
19
20Il peut vous permettre de partager vos media queries entre vos css et les attributs de vos medias,
21aidant ainsi à séparer votre layout (CSS) de votre contenu/structure (HTML),
22rendant ainsi l'intégration des images responsive dans n'importe quel environement ou contexte beaucoup plus simple.
23
24Il inclu aussi un système de plugin, permettant d'étendre ses fonctionnalitées.
25
26
27## Pourquoi LazySize
28
29
30Lazysizes est conçut différement des autres scripts de lazyload d'image.
31
32Il detecte automatiquement les changement de visibilité affectant l'élément courant a précharger
33ainsi que les suivant, et ce dans n'importe quel environnement :
34
35Le script fonctionne de manière autonome, auto initialisé, auto configuré,
36de manière universelle, désactivant ou adaptant les composants future a précharger images ou iframes
37en fonction de leur visibilité, que ce soit via un défilement utilisateur,
38une animation css déclenchée par un changement d'état (:hover)
39ou par un événement/action js (carousel, slider, masonry, isotope, filtrage, Ajax).
40
41Il fonctionne aussi automatiquement en conjonction avec n'importe quel JS/CSS/front end framework
42(jQuery mobile, Bootstrap, Backbone, Angular, React, Ember (voir si besoin l'extension attrchange/re-initialization )).
43
44
45**À l'épreuve du futur** :
46
47Inclue nativement le chargement différé sur les images responsives picture/srcset.
48
49**Separation of concerns** :
50
51For responsive image support it adds an automatic sizes calculation as also alias names for media queries feature.
52There is also no JS change needed if you add a scrollable container with CSS (overflow: auto)
53or create a mega menu containing images.
54
55**Performance** :
56
57It's based on highly efficient, best practice code (runtime and network)
58to work jank-free at 60fps and can be used with hundreds of images/iframes on CSS and JS-heavy pages or webapps.
59
60**Extendable** :
61
62It provides JS and CSS hooks to extend lazysizes with any kind of lazy loading, lazy instantiation,
63in view callbacks or effects (see also the available plugins/snippets).
64
65**Intelligent prefetch/Intelligent resource prioritization** :
66
67lazysizes prefetches/preloads near the view assets to improve user experience,
68but only while the browser network is idling (see also expand, expFactor and loadMode options).
69This way in view elements are loaded faster and near of view images are preloaded lazily before they come into view.
70
71**Lightweight, but mature solution**:
72
73lazysizes has the right balance between a lightweight and a fast, reliable solution.
74
75**Amélioration SEO**:
76
77Lazysize ne masque pas les images/ressources à google ou aux autre robots des moteurs de recherche.
78Ces robots ne défilent pas dans la page et n'interragissent pas avec votre site.
79Lazysize detecte, si l'agent utilisateur (user agent) est capable de défiler
80dans la page et révèle dans ce cas les contenus/ressources immédiatement.
81
82
83
84
85## Addons :
86
87### respimg polyfill plugin
88
89Polyfill alternatif léger pour les images responsives (picture et image src-set).
90
91
92### OPTIMUMX plugin
93
94The srcset attribute with the w descriptor and sizes attribute
95automatically also includes high DPI images.
96But each image has a different optimal pixel density,
97which might be lower (for example 1.5x) than the pixel density
98of your device (2x or 3x).
99This information is unknown to the browser and
100therefore can't be optimized for. The lazySizes optimumx extension gives you more control to trade between perceived quality vs. perceived performance.
101
102### object-fit extension
103
104The object fit plugin polyfills the object-fit and the object-position property in non supporting browsers.
105
106### unveilhooks plugin
107
108The unveilhooks plugin plugin enables lazySizes to lazyload background images, widgets/components/scripts, styles and video/audio elements.
109
110### include plugin
111
112The 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.
113
114### bgset plugin - lazy responsive background-image
115
116The 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.
117
118### lazysizes custommedia extension
119
120lazySizes 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.
121
122### attrchange / re-initialization extension
123
124In case you are changing the data-src/data-srcset attributes
125of already transformed lazyload elements, you must normally also re-add the lazyload class to the element.
126
127This attrchange / re-initialization extension automatically
128detects changes to your data-* attributes and adds the class for you.
129
130### parent-fit extension
131
132The 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.
133
134### unload extension
135
136The unload extends lazysizes to unload not in view images to improve memory
137consumption and orientationchange/resize performance.
138
139### noscript extension
140
141The noscript extension is the ultimate progressive enhancement
142extension for lazySizes. It allows you to transform any HTML
143inside a noscript element as soon as it becomes visible.
144
145### aspectratio extension
146
147The aspectratio extension allows you to control the aspectratio
148of your images using markup instead of CSS. It is an alternative
149for the CSS intrinsic ratio technique.
150
151### print plugin
152
153The print plugin plugin enables lazySizes to unveil all elements
154as soon as the user starts to print.
155(Or set lazySizesConfig.preloadAfterLoad to true).
156
157### progressive plugin
158
159The progressive plugin adds better support for rendering progressive jpgs/pngs.
160
161### RIaS plugin - (Responsive Images as a Service / Responsive image on demand)
162
163The RIaS plugin is a neat full responsive images solution
164without the need of any additional plugins/polyfills.
165
166It enables lazySizes to generate the best suitable
167image source based on an URL pattern.
168It works with pre-build images (i.e. grunt-responsive-images)
169as also with any third party (ReSrc, Pixtulate, mobify, WURFL's Image Tailor ...)
170or self hosted restful responsive image service (responsive image on demand).
171It makes responsive images even more easier without any need for another third party script.
172
173
174## Sources et docs
175
176https://github.com/aFarkas/lazysizes
177
178
179## @todo
180
181
182- [-] Inclure les plugins lazysize depuis un panneau de config ou un define
183puis les charger dans insert_head
184        - [] Inclure les plugins lazysize depuis un define
185        - [] ajouter les scripts dans le privé vu que les modèle sont dipponibles
186- []    preview des modeles dans l'espace privé
187                par exemple : `<picture5|id_document=5>`
188
189- [X] config export ie_config()
190- [] traduire la doc
191- [] Ajouter via define ou config les options de configuration
192- [] surcharger les modèles media, interressants a "lazyloader"
193- [] Chaines de langue, et docs/aide des addons
Note: See TracBrowser for help on using the repository browser.