Lazy Load Test
HTML
<script src="https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js"></script>
<img class="lazy" src="img/grey.gif" data-original="http://placeimg.com/200/200/tech/grayscale" width="640" height="480">
<img class="lazy" src="img/grey.gif" data-original="http://placeimg.com/200/200/tech/grayscale" width="640" height="480">
<img class="lazy" src="img/grey.gif" data-original="http://placekitten.com/200/200" width="640" height="480">
<img class="lazy" src="img/grey.gif" data-original="http://placekitten.com/200/200" width="640" height="480">
<img class="lazy" src="img/grey.gif" data-original="http://placekitten.com/200/200" width="640" height="480">
<img class="lazy" src="img/grey.gif" data-original="http://placekitten.com/200/200" width="640" height="480">
<img class="lazy" src="img/grey.gif" data-original="http://placekitten.com/200/200" width="640" height="480">
<img class="lazy" src="img/grey.gif" data-original="http://placekitten.com/200/200" width="640" height="480">
<img class="lazy" src="img/grey.gif" data-original="http://placekitten.com/200/200" width="640" height="480">
<img class="lazy" src="img/grey.gif" data-original="http://placekitten.com/200/200" width="640" height="480">
<img class="lazy" src="img/grey.gif" data-original="http://placekitten.com/200/200" width="640" height="480">
<img class="lazy" src="img/grey.gif" data-original="http://placekitten.com/200/200" width="640" height="480">
<img class="lazy" src="img/grey.gif" data-original="http://placekitten.com/200/200" width="640" height="480">
<img class="lazy" src="img/grey.gif" data-original="http://placekitten.com/200/200" width="640" height="480">
<img class="lazy" src="img/grey.gif" data-original="http://placekitten.com/200/200" width="640" height="480">
<img class="lazy" src="img/grey.gif" data-original="http://placekitten.com/200/200" width="640" height="480">
<img class="lazy" src="img/grey.gif" data-original="http://placekitten.com/200/200" width="640"...
CSS
img{
display: block;
}
JavaScript
$(function(){
$.fn.extend({
slideInLeft: function() {
return this.each(function() {
$(this).show().css({opacity: 0, position: 'relative', left: "-200px"});
$(this).animate({opacity: 1, left: 0}, 'slow');
});
}
});
$("img").show().lazyload({
'effect': 'slideInLeft'
});
});