jQuery Plugin For Smart Image Loading - Progressive Image

File Size: 3.45 KB
Views Total: 5993
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Smart Image Loading - Progressive Image

Progressive Image is an easy, fast, retina-ready jQuery plugin which allows to intelligently & progressively load the appropriate images for different screen resolutions. This works on screen resolution with 4 sizes: default (desktop), tablet, mobile and full. Specially designed for responsive projects where you wish to reduce the page size and save the bandwidth. The plugin uses JavaScript to calculate the window's size instead of CSS3 media queries, so it works on all the modern browsers and even IE 8/9/10.

How to use it:

1. Load jQuery library and the jQuery progressive image plugin at the bottom of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="progressive-image.js"></script>

2. Add your images with img-* attributes into your web page. There're 3 img-* attributes which help you deal with image delivery on different screen resolutions.

<img class="progressive-image"
     src="original.jpg"
     img-mobile="mobile.jpg" 
     img-tablet="tablet.jpg" 
     img-full="full.jpg"
>

3. Call the function on your images to enable the plugin.

$(function(){
  $('.progressive-image').progressiveImage(); 
});

4. Re-call the plugin on window resize.

$(window).on('resize', function(){
  $('.progressive-image').progressiveImage(); 
});

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