File tree 1 file changed +7
-21
lines changed 1 file changed +7
-21
lines changed Original file line number Diff line number Diff line change 8
8
9
9
Progressively enhance image placeholders once they are in the viewport.
10
10
11
- * Responsive lazy loading images
12
- * Save data option
13
- * No content reflow/layout shifting
14
- * No dependencies
15
- * Framework agnostic
11
+ * Faster page load: Images are loaded only as they enter the viewport, using native browser lazy loading with placeholders
12
+ * Visual stability: Prevent layout shifts when loading images
13
+ * Save data option: Load images only on demand
14
+ * No dependencies: Framework agnostic web component
16
15
17
16
<div align =" center " >
18
17
<img src =" example-2x.png " alt =" progressive image element markup example " width =" 774 " >
@@ -88,21 +87,8 @@ progressive-image > img.loaded { opacity: 1; }
88
87
```
89
88
90
89
91
- ## Examples
92
- - [ Example page] ( https://andreruffert.github.io/progressive-image-element/examples )
93
- - [ Simple fadeIn transition - CodePen] ( https://codepen.io/andreruffert/full/mdyZLrQ )
94
- - [ Save data option with loading state - CodePen] ( https://codepen.io/andreruffert/full/yLydrdb )
95
- - [ React Component - CodePen] ( https://codepen.io/andreruffert/full/KKpKVRO )
96
-
97
-
98
- ## Browser support
99
-
100
- Browsers without native [ custom element support] [ support ] require a [ polyfill] [ ] .
101
-
102
- [ support ] : https://caniuse.com/#feat=custom-elementsv1
103
- [ polyfill ] : https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements
104
-
105
-
106
90
## License
107
91
108
- MIT © [ André Ruffert] ( https://andreruffert.com )
92
+ Distributed under the MIT license. See LICENSE for details.
93
+
94
+ © [ André Ruffert] ( https://andreruffert.com )
You can’t perform that action at this time.
0 commit comments