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 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 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.

The above is the detailed content of Loadr, an efficient solution for seamlessly loading large images in HTML. For more information, please follow other related articles on the PHP Chinese website!