This time I will share jQuery Plugin and tutorial about Lazy Load Images & Backgrounds As Needed – jQuery Air Load Image, hope it will help you in programming stack.
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.
1 |
< script src = "//code.jquery.com/jquery-3.2.0.slim.min.js" ></ script > |
2 |
< 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.
1 |
< img class = "_air-load-image" |
3 |
data-air-img = "demo.jpg" > |
5 |
< div class = "_air-load-image" |
6 |
style = "background-image: url('placeholder.jpg');" |
3. Active the image lazy load plugin with just one line of code.
1 |
var airLoad = new AirLoadImage(); |
4. Active the image lazy load plugin with just one line of code.
1 |
$( '._air-load-image' ).airLoadImage(); |
5. Plugin’s default options.
1 |
$( '._air-load-image' ).airLoadImage({ |
4 |
pluginId: 'airLoadImage' |
Change log:
2017-06-30
This awesome jQuery plugin is developed by meroPush. For more Advanced Usages, please check the demo page or visit the official website.