Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

LazyLoad

By: iamdangavin on Aug 20th, 2012  |  syntax: JavaScript  |  size: 2.67 KB  |  hits: 68  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1.  
  2. jQuery(window).load(function(){
  3.        
  4.         // Load the first images visible in view-port.
  5.         jQuery(".work .project .images img:in-viewport").each(function() {
  6.                 loadImage(jQuery(this));
  7.         });
  8.  
  9. });
  10.  
  11. jQuery(document).ready(function(){
  12.  
  13.         /* Cache Elements for Use */
  14.         var     images = jQuery(".work .project .images");
  15.  
  16.         /* Catch the main scroll event */
  17.        
  18.         jQuery(window).scroll(function (e) {
  19.                
  20.                
  21.                 var scrollTop = jQuery(this).scrollTop();
  22.                
  23.                
  24.                 /*=======================
  25.                        
  26.                         Image Loading
  27.                        
  28.                 =======================*/
  29.  
  30.                 loadImage( images.find("img:right-of-screen:first") );
  31.                
  32.  
  33.                 if (jQuery(window).width() < 1100) {
  34.                
  35.                         jQuery(".work .images .image img:right-of-screen").each(function(){
  36.                                 loadImage( jQuery(this) );
  37.                         });
  38.                
  39.                 }
  40.                
  41.         });
  42.        
  43. });
  44.  
  45.  
  46. /* Loads and fades in image */
  47.  
  48. function loadImage(image, callback) {
  49.         if (typeof callback == 'undefined') { callback = function(){}; }
  50.  
  51.         if (image.attr("src") == "images/core/transparent.gif") {
  52.        
  53.                 image.animate({opacity:0}, 50, function() {
  54.                         image.attr("src", image.attr("data-original")).bind('load', function(){
  55.                                 image.animate({opacity:1}, 1000).css({height:'auto'});
  56.                                 callback();
  57.                         });
  58.                 });
  59.  
  60.         }
  61. }
  62.  
  63.  
  64. /*
  65.  * Viewport - jQuery selectors for finding elements in viewport
  66.  *
  67.  * Copyright (c) 2008-2009 Mika Tuupola
  68.  *
  69.  * Licensed under the MIT license:
  70.  *   http://www.opensource.org/licenses/mit-license.php
  71.  *
  72.  * Project home:
  73.  *  http://www.appelsiini.net/projects/viewport
  74.  *
  75.  */
  76.  
  77. (function($){$.belowthefold=function(element,settings){var fold=$(window).height()+$(window).scrollTop();return fold<=$(element).offset().top-settings.threshold;};$.abovethetop=function(element,settings){var top=$(window).scrollTop();return top>=$(element).offset().top+$(element).height()-settings.threshold;};$.rightofscreen=function(element,settings){var fold=$(window).width()+$(window).scrollLeft();return fold<=$(element).offset().left-settings.threshold;};$.leftofscreen=function(element,settings){var left=$(window).scrollLeft();return left>=$(element).offset().left+$(element).width()-settings.threshold;};$.inviewport=function(element,settings){return!$.rightofscreen(element,settings)&&!$.leftofscreen(element,settings)&&!$.belowthefold(element,settings)&&!$.abovethetop(element,settings);};$.extend($.expr[':'],{"below-the-fold":function(a,i,m){return $.belowthefold(a,{threshold:-200});},"above-the-top":function(a,i,m){return $.abovethetop(a,{threshold:0});},"left-of-screen":function(a,i,m){return $.leftofscreen(a,{threshold:0});},"right-of-screen":function(a,i,m){return $.rightofscreen(a,{threshold:0});},"in-viewport":function(a,i,m){return $.inviewport(a,{threshold:150});}});})(jQuery);
create a new version of this paste RAW Paste Data