Johan's Thoughts: June 2011

When you have a long page with many images, you can save your server some bandwidth and/or peak loading by only loading the images that the user can see. Even if all images are seen by the user, it spreads the load and those that are not scrolled within view, are not loaded at all. Simple example. Feel free to copy, a mention of the source would be polite.

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>

Johan's Thoughts

Friday, June 24, 2011

Lazy Image loader