Lazy Load Images & Backgrounds As Needed - jQuery Air Load Image

Just another jQuery lazy load plugin that has the ability to delay image (and even background image) loading to only when they appear on the screen. Image loading placeholder and timeThrottle are supported. Ideal for long web pages containing many large images to make the website load faster.

How to use it:

1. Include jQuery library (slim build is recommended) and the Air Load Image plugin's script at the bottom of the page.

<script src="//code.jquery.com/jquery-3.2.0.slim.min.js"></script>
<script src="air-load-image.js"></script>

2. Embed your images and background images use the data-air-img attribute, which will auto change to the standard src attribute as the image(s) enter the viewport on vertical page scrolling.

<img class="_air-load-image" 
     src="placeholder.jpg" 
     data-air-img="demo.jpg">

<div class="_air-load-image" 
     style="background-image: url('placeholder.jpg');" 
     data-air-img="bg.jpg">
</div>

3. Active the image lazy load plugin with just one line of code.

var airLoad = new AirLoadImage();

4. Active the image lazy load plugin with just one line of code.

$('._air-load-image').airLoadImage();

5. Plugin's default options.

$('._air-load-image').airLoadImage({
  offset: '75%',
  delay: 750,
  pluginId: 'airLoadImage'
});

Change log:

2017-06-30

• release v2.0.0

---

This awesome jQuery plugin is developed by meroPush. For more Advanced Usages, please check the demo page or visit the official website.