lazy-blur-images
v0.1.32
Published
Lazy Blur Images is a single-light script that allows developers to implement an async image charge in their websites when they are in the visible area of the user
Downloads
1
Readme
Lazy Blur Images
Lazy Blur Images is a single-light script that allows developers to implement an async image charge in their websites when they are in the visible area of the user
You can view a example of this library from here
How Works
Lazy Blur Images works with base64 images to show a light preview while the real image is downloaded in the background, the image will be downloaded after the "load" event if it is in the visible area, by default the Intersection Observer API is used to detect if the image is in the visible area, if the browser does not support this api, it is downloaded inmediatally after the "load" event
Placeholder Studio
You can get and manipulate a placeholder from the official (and free) Placeholder Studio for this package
How to implement
We need to get our base64 small image from Placeholder Studio
<img
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-src="assets/img/demopic/9.jpg"
data-placeholder="blur"
data-blur="some-blur-id"
data-scale="1.5"
data-radio="20"
data-size="WxH"
decoding="async"
alt="Some alt text"
/>
<noscript><img src="assets/img/demopic/9.jpg" /></noscript>
<!-- Before close body -->
<script src="https://cdn.jsdelivr.net/npm/lazy-blur-images@latest/lazy-blur-images.js"></script>
<script>
lazyBlurData = {
"some-blur-id": "Your-blur-image-string-in-base64",
};
LazyBlurImages.init();
</script>
| property | description | default | | ---------------- | ---------------------------------------------------------- | -------- | | src | gif 1x1 pixel transparent in base64 | Manually | | data-src | The original image url | Manually | | data-placeholder | Placeholder type (only blur supported) | Manually | | data-size | Image size in WxH format ( e.g. 200x500 ) | Manually | | data-blur | The blur key of the lazyBlurData object | Manually | | data-scale | Custom css transform: scale() used to show the placeholder | 1 | | data-radio | Custom css filter: blur() radio in pixels | 20 |
The <noscript>...</noscript>
tags contain the original image, it will be showed if javascript is disabled