LazyPic

The default behavior of the browser is that it downloads all images, regardless of whether you see the images or not. This leads to increased loading times for the website because it loads an unnecessarily large number of images. With LazyPic, the images are only loaded when they are in the field of view, this prevents the loading of unnecessary images that are not in the field of view. In addition, LazyPic offers nice transition effects

Script size: 3.4 kB

Installation

<script defer src="http://cloud5828261.nitrado.cloud/script.v1.min.js"></script>

or with npm:

npm install lazypic

How to use ?

If you installed it with npm then you need to import it and initial the script:

import lazyPicInit from "lazypic"

Now initial:

lazyPicInit()

After loading images over AJAX you will need need to re-inital the images again with:

lazyPicInit()

Configuration

Add lazypic attribute to your <img> that you want to be lazyloaded. Like this:

<img lazypic="your/img/url" />

Thats all, the image will be lazy-loaded as soon its in the visible screen-height.

For the best experience, wrap your image in a div with the property position: relative. Set the images, position property to absolute, width: 100% , height: 100% and object-fit: cover.

<div class="imgholder">
   <img lazypic="your/img/url" />
</div>

<style>
.imgholder {
   position: relative;
   height: 300px;
   width: 500px;
}
.imgholder img {
   position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
</style>

Available options:

| Option | Type | Description | | ------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | lazypic | string | Put your URL of your image here | | lazyheight | number | (optional, default = 0) By default your images will being loaded as soon they are visible. If you want to load them earlier then set a height like this lazyheight="200". That means it will load 200px earlier. You can also set an negative number -200, it will load 200px later. | | lazyanimation | "fade", "popup", "slide" | (optional) Choose between Fading, popup or sliding transitions | | lazytime | ms | (optional, default = 500ms) Set the transition duration in ms. | | lazydirection | "up", "left", "right", "down" | (optional, default = "up") Choose from witch side the image should slide in. Only available in combination with slide animation type | | lazyspinner | "true" | (optional, default = false) Adds an spinner that indicates the loading of the image |

Example

Checkout this demo: http://cloud5828261.nitrado.cloud/

compatibility with Vue.js

Demo with Vue.js: http://cloud5828261.nitrado.cloud/lazyvue.html

If you installed lazyPic with npm, you will need to init lazyPic in the mounted lifecycle hook:

mounted: function(){
   lazyPicInit();
}

In case you render your images in a v-for loop and fetch more images over AJAX, you will need to initial lazyPic. Make sure you wrap the function inside nextTick() to make sure the DOM is updated.

this.$nextTick(function(){
   lazyPicInit();
})