- Give your images the class "lazy"
- Put the url of a waiting image in the "src" attribute (a nice spinning ball")
- put the real url of the image in the "alt" attribute
- put your "alt" tekst in the "title" attribute
- include the jQuery javescript lib
- add the code below in the script tag.
Have fun, Johan.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Lazy Loader</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> // Lazy Loader by Johan Coppieters - Feel free to copy. var gAllImagesLoaded = false; function LazyLoad(){ if (! gAllImagesLoaded) { var aWindow = $(window); // add pixels to the "0", if you want the image to load earlier var aScrollPos = aWindow.height() + aWindow.scrollTop() + 0; // get imgs not loaded $('img.lazy').each(function(){ var anImg = $(this); // we only check images coming from the bottom, not top if(anImg.offset().top < aScrollPos){ anImg.attr('src', anImg.attr('alt')) .attr('alt', anImg.attr('title')) .removeClass('lazy'); } }); gAllImagesLoaded = $('img.lazy').length = 0; } } $(document).ready(function(){ LazyLoad(); $(window).scroll(LazyLoad); }); </script> </head> <body> <h1>Lazy Loader</h1> <p>by Johan Coppieters.</p> <img class="lazy" alt="http://www.bobdylan.com/sites/www.bobdylan.com/files/imagecache/cover_300/worldgonewrong.jpg" src="http://dominios.googlecode.com/files/ajax-loader.gif" title="Bob Dylan" height="200" ><br><br> <img class="lazy" alt="http://www.bobdylan.com/sites/www.bobdylan.com/files/imagecache/cover_300/live1966_0.jpg" src="http://dominios.googlecode.com/files/ajax-loader.gif" title="Bob Dylan" height="200" ><br><br> <img class="lazy" alt="http://www.bobdylan.com/sites/www.bobdylan.com/files/imagecache/cover_300/mtvunplugged_1.jpg" src="http://dominios.googlecode.com/files/ajax-loader.gif" title="Bob Dylan" height="200" ><br><br> <img class="lazy" alt="http://www.bobdylan.com/sites/www.bobdylan.com/files/imagecache/cover_300/saved.jpg" src="http://dominios.googlecode.com/files/ajax-loader.gif" title="Bob Dylan" height="200" ><br><br> <img class="lazy" alt="http://www.bobdylan.com/sites/www.bobdylan.com/files/imagecache/cover_300/moderntimesbobdylan.jpg" src="http://dominios.googlecode.com/files/ajax-loader.gif" title="Bob Dylan" height="200" ><br><br> <img class="lazy" alt="http://www.bobdylan.com/sites/www.bobdylan.com/files/imagecache/cover_300/bestofbobdylan_0.jpg" src="http://dominios.googlecode.com/files/ajax-loader.gif" title="Bob Dylan" height="200" ><br><br> <img class="lazy" alt="http://www.bobdylan.com/sites/www.bobdylan.com/files/imagecache/cover_300/nodirectionhome.jpg" src="http://dominios.googlecode.com/files/ajax-loader.gif" title="Bob Dylan" height="200" ><br><br> <img class="lazy" alt="http://www.bobdylan.com/sites/www.bobdylan.com/files/imagecache/cover_300/live1964.jpg" src="http://dominios.googlecode.com/files/ajax-loader.gif" title="Bob Dylan" height="200" ><br><br> <img class="lazy" alt="http://www.bobdylan.com/sites/www.bobdylan.com/files/imagecache/cover_300/live1975.jpg" src="http://dominios.googlecode.com/files/ajax-loader.gif" title="Bob Dylan" height="200" ><br><br> <img class="lazy" alt="http://www.bobdylan.com/sites/www.bobdylan.com/files/imagecache/cover_300/loveandtheft.jpg" src="http://dominios.googlecode.com/files/ajax-loader.gif" title="Bob Dylan" height="200" ><br><br> <img class="lazy" alt="http://www.bobdylan.com/sites/www.bobdylan.com/files/imagecache/cover_300/EssentialDylan.jpg" src="http://dominios.googlecode.com/files/ajax-loader.gif" title="Bob Dylan" height="200" ><br><br> <img class="lazy" alt="http://www.bobdylan.com/sites/www.bobdylan.com/files/imagecache/cover_300/30thanniversary.jpg" src="http://dominios.googlecode.com/files/ajax-loader.gif" title="Bob Dylan" height="200" ><br><br> <img class="lazy" alt="http://www.bobdylan.com/sites/www.bobdylan.com/files/imagecache/cover_300/ohmercy.jpg" src="http://dominios.googlecode.com/files/ajax-loader.gif" title="Bob Dylan" height="200" ><br><br> <img class="lazy" alt="http://www.bobdylan.com/sites/www.bobdylan.com/files/imagecache/cover_300/downinthegroove.jpg" src="http://dominios.googlecode.com/files/ajax-loader.gif" title="Bob Dylan" height="200" ><br><br> <img class="lazy" alt="http://www.bobdylan.com/sites/www.bobdylan.com/files/imagecache/cover_300/empireburlesque.jpg" src="http://dominios.googlecode.com/files/ajax-loader.gif" title="Bob Dylan" height="200" ><br><br> <img class="lazy" alt="http://www.bobdylan.com/sites/www.bobdylan.com/files/imagecache/cover_300/reallive.jpg" src="http://dominios.googlecode.com/files/ajax-loader.gif" title="Bob Dylan" height="200" ><br><br> <img class="lazy" alt="http://www.bobdylan.com/sites/www.bobdylan.com/files/imagecache/cover_300/infidels.jpg" src="http://dominios.googlecode.com/files/ajax-loader.gif" title="Bob Dylan" height="200" ><br><br> </body> </html>