open-loadr
v0.0.9
Published
Loadr is an efficient solution for seamlessly loading large images in HTML, with a minified size of under 1 KB.
Downloads
23
Maintainers
Readme
Installation
CDN
Import Loadr using CDN.
index.html
<script src="https://cdn.jsdelivr.net/npm/open-loadr/loadr.min.js"></script>
🚧 Specific Version
<script src="https://cdn.jsdelivr.net/npm/open-loadr@latest/loadr.min.js"></script>
Usage
Add the hr-src
to the HTML <img>
element, This will be your high-res image. In the src
attribute is the low-res version of your image. Loadr will load the high-res image in the background then update the src
with its URL, Replacing the low-res image.
index.html
<img hr-src="https://open-loadr.github.io/loadr/images/the_starry_night/high_res.jpg" src="https://open-loadr.github.io/loadr/images/the_starry_night/low_res.png">
Call Loadr in your Javascript. That's it 🎉.
index.html
<script>
new Loadr();
</script>
Check out the Demo on Codepen.
Extra step
Lets add some styling to the <img>
element.
style.css
img {
height: 300px;
width: 300px;
object-fit: cover;
border-radius: 15px;
overflow: hidden;
}
Customization
Loadr comes with variables that can be easily customized.
index.html
<script>
new Loadr({
async: false,
cache: true,
delay: '750'
});
</script>
Check out the Customization Demo on Codepen.
Copyright and license
Licensed under the MIT License, Copyright © 2024-present open-loadr.
See LICENSE for more information.