All images are loaded. Page takes long time to load. Shift-reload to test again. But wait there is more! You can also lazy load sideways or gazillion images.






pax_global_header 0000666 0000000 0000000 00000000064 11722757044 0014523 g ustar 00root root 0000000 0000000 52 comment=f695a2f74cb18c9f72f5b021271265fbdaefb1de jquery-lazyload-1.7.2/ 0000775 0000000 0000000 00000000000 11722757044 0014666 5 ustar 00root root 0000000 0000000 jquery-lazyload-1.7.2/.gitignore 0000664 0000000 0000000 00000000012 11722757044 0016647 0 ustar 00root root 0000000 0000000 /.project jquery-lazyload-1.7.2/Makefile 0000664 0000000 0000000 00000001022 11722757044 0016321 0 ustar 00root root 0000000 0000000 VERSION = 1.6.0-dev SHELL = /bin/sh DOWNLOAD = /srv/www/www.appelsiini.net/shared/static/download JSMIN = /home/tuupola/bin/jsmin all: lazyload minified latest lazyload: jquery.lazyload.js cp jquery.lazyload.js $(DOWNLOAD)/jquery.lazyload-$(VERSION).js minified: jquery.lazyload.js cp jquery.lazyload.min.js $(DOWNLOAD)/jquery.lazyload-$(VERSION).min.js latest: jquery.lazyload.js jquery.lazyload.min.js cp jquery.lazyload.js $(DOWNLOAD)/jquery.lazyload.js cp jquery.lazyload.min.js $(DOWNLOAD)/jquery.lazyload.min.js jquery-lazyload-1.7.2/README.textile 0000664 0000000 0000000 00000004117 11722757044 0017226 0 ustar 00root root 0000000 0000000 h3. Changelog h4. 1.7.1 * Fix bug "#18":https://github.com/tuupola/jquery_lazyload/pull/18. Document was always scrolled to top issue on IE 7 and Chrome 17 if using jQuery 1.6 or older. ("Ross Allen":https://github.com/ssorallen) * General code speedup ("Valentin Zwick":https://github.com/vzwick) h4. 1.7.0 * Optimized viewport selectors. Around 25% "speed increase":http://jsperf.com/lazyload-1-7-0 compared to "1.6.0":http://jsperf.com/lazyload-1-6-0. * Add _data_attribute_ parameter. Allows custom naming of original data attribute. ("Bryan Chow":https://github.com/bryanchow) * Track window resize event. ("Simon Baynes":https://github.com/baynezy) * Add _appear_ event. This function is called when image appears to viewport but before it is loaded. * Add _load_ event. This function is called when image is loaded. ("Nick Larson":https://github.com/ifightcrime) * Renamed _effectspeed_ parameter to _effect_speed_. Old version will still works couple of versions. This parameter was previously undocumented. * Fix _failure_limit_ bug "#19":https://github.com/tuupola/jquery_lazyload/issues/19. ("Brandon":https://github.com/Brandon0) h4. 1.6.0 * Rename original attribute to data-original to be HTML5 friendly. * Remove all code regarding placeholder and automatically removing src attribute. It does not work with modern browsers. Must use data-original attribute instead. * Add support for James Padolseys "scrollstop event":http://james.padolsey.com/javascript/special-scroll-events-for-jquery/. Use when you have hundreds of images. * Add _skip_invisible_ parameter. When true plugin will skip invisible images. ("Valentin Zwick":https://github.com/vzwick) * Renamed _failurelimit_ parameter to _failure_limit_. Old version will still work couple of versions. h4. 1.5.0 * Support for removing the src attribute already in HTML. This is not a drop in solution but gives additional speed for those who need it. (Jeremy Pollock) h4. 1.4.0 * When scrolling down quickly do not load the images above the top. (Bart Bruil) h4. 1.3.2 * Support for scrolling within a container. * Fixed IE not loading images. jquery-lazyload-1.7.2/Rakefile 0000664 0000000 0000000 00000001236 11722757044 0016335 0 ustar 00root root 0000000 0000000 task :default => [:minify] desc "Minify" task :minify do begin require 'uglifier' rescue LoadError => e if verbose puts "\nYou'll need the 'uglifier' gem for minification. Just run:\n\n" puts " $ gem install uglifier" puts "\nand you should be all set.\n\n" exit end return false end puts "Minifying jquery.lazyload.js with UglifyJS..." File.open("jquery.lazyload.min.js", "w"){|f| f.puts Uglifier.new.compile(File.read("jquery.lazyload.js"))} puts "Minifying jquery.scrollstop.js with UglifyJS..." File.open("jquery.scrollstop.min.js", "w"){|f| f.puts Uglifier.new.compile(File.read("jquery.scrollstop.js"))} end jquery-lazyload-1.7.2/disabled.html 0000664 0000000 0000000 00000004703 11722757044 0017327 0 ustar 00root root 0000000 0000000
All images are loaded. Page takes long time to load. Shift-reload to test again. But wait there is more! You can also lazy load sideways or gazillion images.
Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down they are loaded when needed. Empty cache and shift-reload to test again. Compare this to page where plugin is disabled, same page with fadein effect, page with wide layout or wide content inside container.
$("img").lazyload();
Images below the visible area (the ones lower than container bottom) are not loaded. When scrolling down they are loaded when needed. Empty cache and shift-reload to test again. Compare this to page where plugin is disabled or same page with fadein effect.
$("img").lazyload({
effect : "fadeIn",
container: $("#container")
});
Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down they are loaded when needed. Images appear using fadeIn effect. Empty cache and shift-reload to test again. Compare this to page where plugin is without effects.
$("img").lazyload({
effect : "fadeIn"
});
When you have hundreds of images it is best to use James Padolseys scrollstop event. Compate this to page where plugin is disabled or page with larger images.
<script src="jquery.scrollstop.js" type="text/javascript"></script>
<img data-original="img/example.jpg" src="img/grey.gif">
$("img").lazyload({
event: "scrollstop"
});






























































































































































































































































































This page deprecates gracefully for non JavaScript browsers. It requires hiding lazy loaded images with css and adding a <noscript> block which contains the real image and it is shown when JavaScript is not enabled. If JavaScript is enabled show() function is called before initializing Lazy Load plugin.
/* CSS **/
.lazy {
display: none;
}
/* JS */
$("img.lazy").show().lazyload({
effect : "fadeIn"
});
/* HTML */
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="765" height="574">
<noscript><img src="img/example.jpg" width="765" height="574"></noscript>
Here Lazy Load plugin is enabled. Images are not loaded. Timeout will trigger five seconds after all other elements of page have been loaded.
$(function() {
$("img").lazyload({
event : "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() { $("img").trigger("sporty") }, 5000);
});
Images right of the fold are not loaded. When scrolling left they are loaded when needed. Shift-reload to test again. Compare this to page where plugin is disabled or page with gazillion images.
$("img").lazyload({
effect: "fadeIn"
});
Images right of the visible area are not loaded. When scrolling left they are loaded when needed. Shift-reload to test again. Compare this to page where plugin is disabled or page with gazillion images.
$("img").lazyload({
container: $("#container")
});