unveil lazyload with callback

by ian_smithz

HTML

<script src="http://luis-almeida.github.io/unveil/jquery.unveil.js"></script>
<script src="https://luis-almeida.github.io/unveil/jquery.unveil.js"></script>
  <ul>
        <li><img data-src="http://lorempixel.com/g/800/500/city/1" data-src-retina="http://lorempixel.com/g/1280/800/city/1" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></li>
        <li><img data-src="http://lorempixel.com/g/800/500/city/2" data-src-retina="http://lorempixel.com/g/1280/800/city/2" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></li>
        <li><img data-src="http://lorempixel.com/g/800/500/city/3" data-src-retina="http://lorempixel.com/g/1280/800/city/3" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></li>
        <li><img data-src="http://lorempixel.com/g/800/500/city/4" data-src-retina="http://lorempixel.com/g/1280/800/city/4" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></li>
        <li><img data-src="http://lorempixel.com/g/800/500/city/5" data-src-retina="http://lorempixel.com/g/1280/800/city/5" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></li>
        <li><img data-src="http://lorempixel.com/g/800/500/city/6" data-src-retina="http://lorempixel.com/g/1280/800/city/6" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></li>
        <li><img data-src="http://lorempixel.com/g/800/500/city/7" data-src-retina="http://lorempixel.com/g/1280/800/city/7" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></li>
        <li><img data-src="http://lorempixel.com/g/800/500/city/8" data-src-retina="http://lorempixel.com/g/1280/800/city/8" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></li>
        <li><img data-src="http://lorempixel.com/g/800/500/city/9"...

CSS

img {
  opacity: 0;
  transition: opacity .3s ease-in;
}

JavaScript

$("img").unveil(200, function() {
  $(this).load(function() {
    this.style.opacity = 1;
  });
});