jQuery lazyResp

lazyResp is a jQuery plugin with a very small footprint ( *~ 0.7 Kb Gzipped* ) that handle images loading on multiple screen resolution. Check the demo on the official web page of the plugin.

How it works

Using jQuery lazyResp is pretty straightforward, just include the script in your page:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../jquery.lazyresp.js"></script>

Then initialize it on $(window).load() as follow:

<img src="http://placehold.it/480x360" height="250" width="250" class="lazyResp"
    data-small-retina="http://placehold.it/960x720" 
    data-medium="http://placehold.it/1024x768" 
    data-medium-retina="http://placehold.it/2048x1536" 
    data-large="http://placehold.it/1920x1440" 
    data-large-retina="http://placehold.it/2560x1920">
  
...
  
<script type="text/javascript">
$(window).load(function() {
  $('img.lazyResp').lazyResp();
});
</script>

Here's the script options and default values:

$('img.lazyResp').lazyResp({
  medium: 640,    // Medium > 640px
  large: 1024,    // Large > 1024px
  retina: 1.01,   // Device pixel ratio to be considered retina >= 1.01
  tolerance: 0,   // Extend the viewport of 0px vertically and horizontally
  lazy: true,     // If set to false disable lazy loading
  beforeLoad: function (img) {},  // Do something before the right image is loaded
  afterLoad: function (img) {}    // Do something after the right image is loaded
});

jQuery lazyResp provide also a refresh() method to check if elements are in the viewport without having to scroll the page:

var lr = $('img.lazyResp').lazyResp();
$('a.check').click(function (e) {
  e.preventDefault();
  lr.refresh();
});

You can also target a given image setting lazy to false in order to load the right image size on demand, here's an example using jQuery lazyResp with jQuery owlCarousel:

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    singleItem:true,
    navigation : true,
    afterInit: function () {
      var $firstImage = $(this.owl.owlItems[0]).find('img');
      $firstImage.lazyResp({lazy:false});
    },
    afterMove: function () {
      var $currentImage = $(this.owl.owlItems[this.owl.currentItem]).find('img');
      $currentImage.lazyResp({lazy:false});
    }
  });
});