/ Published in: JavaScript
Via @lmgalmeida
Usage:
data-src="image.jpg" src="loader.gif"
$("img").unveil();
Usage:
data-src="image.jpg" src="loader.gif"
$("img").unveil();
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
(function( $ ) { $.fn.unveil = function () { var images = this, loaded, inview; this.one("unveil", function(){ this.setAttribute( "src", this.getAttribute( "data-src" ) ); this.removeAttribute( "data-src" ); }); function unveil () { inview = images.filter(function(){ var $e = $(this), $w = $(window), wt = $w.scrollTop(), wb = wt + $w.height(), et = $e.offset().top, eb = et + $e.height(); return eb >= wt && et <= wb; }); loaded = inview.trigger("unveil"); images = images.not( loaded ); } $(window).scroll(unveil); unveil(); return this; }; })( jQuery );