Loadr, an efficient solution for seamlessly loading large images in HTML

how does it work it:

it loads a low-res image first from the img src then in the hr-src atrbute it loads the high-res image in the background the once loaded replaces the low-res url with the high-res one.

Check out the repo a star would be Awesome

Demo

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.

<script>
  new Loadr({
    async: false,
    cache: true,
    delay: '750'
  });
</script>

Check out the Customization Demo on Codepen.