~~~ function imgLazyLoad(options) { var settings = { Id: $('img'), threshold: 100, effectspeed: 0, effect: "fadeIn" } $.extend(settings, options); var $this = settings.Id; var timeout = null; $(window).bind('load resize', loadImg); $(window).scroll(function() { if(timeout) { clearTimeout(timeout); } timeout = setTimeout(loadImg ? loadImg : "", 100); }) function loadImg() { settings.Id.each(function() { if(!belowthefold(this)) { if($(this).is(':visible')) { $(this).trigger("appear"); } } }) } return $this.each(function(i) { var self = this; //$(self).data('t', $(self).offset().top); if(belowthefold(self)) { self.loaded = false; } else { if($(self).is(':visible')) { $(self).attr("src", $(self).attr("original")); self.loaded = true; } } $(self).one("appear",function() { if(!this.loaded) { $("<img />").bind("load",function() { $(self).hide().attr("src", $(self).attr("original"))[settings.effect](settings.effectspeed); self.loaded = true; }).attr("src", $(self).attr("original")) } }) }) function belowthefold(element) { var fold = $(window).height() + $(window).scrollTop(); return fold <= $(element).offset().top - settings.threshold; } } imgLazyLoad({ threshold: 0, effectspeed: 800 }) ~~~