unveil.js - a lightweight version of the \'lazy load\' plugin


/ Published in: JavaScript
Save to your folder(s)

Via @lmgalmeida

Usage:

data-src="image.jpg" src="loader.gif"

$("img").unveil();


Copy this code and paste it in your HTML
  1. (function( $ ) {
  2. $.fn.unveil = function () {
  3. var images = this, loaded, inview;
  4.  
  5. this.one("unveil", function(){
  6. this.setAttribute( "src", this.getAttribute( "data-src" ) );
  7. this.removeAttribute( "data-src" );
  8. });
  9.  
  10. function unveil () {
  11. inview = images.filter(function(){
  12. var $e = $(this),
  13. $w = $(window),
  14. wt = $w.scrollTop(),
  15. wb = wt + $w.height(),
  16. et = $e.offset().top,
  17. eb = et + $e.height();
  18.  
  19. return eb >= wt && et <= wb;
  20. });
  21.  
  22. loaded = inview.trigger("unveil");
  23. images = images.not( loaded );
  24. }
  25.  
  26. $(window).scroll(unveil);
  27. unveil();
  28.  
  29. return this;
  30. };
  31. })( jQuery );

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.