Question

Having found a seemingly excellent solution for loading images after a document’s loaded here:

 $(function(){
    $.each(document.images, function(){
               var this_image = this;
               var src = $(this_image).attr('src') || '' ;
               if(!src.length > 0){
                   //this_image.src = options.loading; // show loading
                   var lsrc = $(this_image).attr('lsrc') || '' ;
                   if(lsrc.length > 0){
                       var img = new Image();
                       img.src = lsrc;
                       $(img).load(function() {
                           this_image.src = this.src;
                       });
                   }
               }
           });
  });

I immediately realized that template languages such as HAML will present a problem since there is no src attribute to rename directly. I pondered on the possibility of using js to rename all src initially to lsrc as the dom loaded up and then on document finish to rename them back to src, but I’m just not sure what the cleanest method may be here.

The bottom line is that I would like to load up images after the html has initially loaded and before the other javascript scriptss load if at all possible.

Answer 1

So far, and thanks to the previous post to get me searching properly, this seems to really do the trick for HAML et al: http://www.appelsiini.net/projects/lazyload

It did indeed work out beautifully and with multiple classes to boot. Was able to modify my image tags as such:

    =image_tag "/assets/spinner.gif", "data-original" => "path_to_image", :class =>"class1 lazy", :size => "100x100"

Then added a line at the end to load it for the page(s) I wanted:

:javascript
  $("img.lazy").lazyload();