Advanced Search

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();

Expand | Embed | Plain Text

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.