AC LazyLoadImage.js

Hello, this is my plugin to lazy load image on div and image. I use it to load image for diferent screen resolution.

how it use

JS

inlude acLazyLoadImage.js file after jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="acLazyLoadImage.js"></script> 

after this execute script

$( ".img_lazy" ).ImgLazyLoad(); 

html tag's

for one image

<div class="img_lazy" data-src="ImageUrlHere"></div> 

data-src attributes is required

few resources

<div class="img_lazy" data-src="ImageUrlHere" data-src-small="ImageSmallUrlHere" data-src-big="ImageBigUrlHere"></div> 

img tag

you can use on image element

<img class="img_lazy" data-src="ImageUrlHere"> 

or

<img class="img_lazy" data-src="ImageUrlHere" data-src-small="ImageSmallUrlHere" data-src-big="ImageBigUrlHere"> 

Options

$( ".img_lazy" ).ImgLazyLoad({     mobile: "640",      qhd:"1680",      offset:"-150",      time:"250"   }); 

• mobile: is maximum width which small image is loaded
• qhd: is minimum width which big image is loaded
• offset: pixels in front of element before plugin load image
• time: interval time which function check visible elements

Licence

MIT and I will be happy if it will be useful :)

My homepage