0

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.

Community
  • 1
  • 1
ylluminate
  • 12,102
  • 17
  • 78
  • 152
  • You can read about some lazy load techniques for images [here](http://engineering.slideshare.net/2011/03/faster-page-loads-with-image-lazy-loading/) and [here](http://davidwalsh.name/lazyload-plugin) and [here](http://www.appelsiini.net/projects/lazyload). A google search for "javascript lazy load images" produces a ton of other articles. – jfriend00 Jan 18 '12 at 04:50

2 Answers2

0

If you already have the src, it is no use skipping them with jQuery's document.ready or $(), because the images will have been loaded. The only way of not loading them is to initially giving the a display:none css.

Generally speaking it is better to solve the problem at 'render-time' and render a lazy-src. If you can't do that, the css option would be an alternative, but it will not get you a price for nice coding.

  1. You could add a class for lazyLoad for the lazy loaded images and hide them with CSS.
  2. Get them on the document.ready or $()
  3. Lazy load the images (by the src)
  4. Call the .removeClass('lazyLoad); on the image after loading.
Kees C. Bakker
  • 32,294
  • 27
  • 115
  • 203
  • Are you sure that display: none causes images not to be loaded? That is not my experience. That is true with flash objects, but I don't think that's the case with images. As far as I know, the ONLY way not to have images load initially is to either not have the `` tags in the page or not have the `.src` attribute in place. If the `.src` attribute is there, the browser will start loading them (or queueing them to be loaded) as soon as that tag is parsed before any JS can be run to change the behavior. – jfriend00 Jan 18 '12 at 04:48
  • I see from reading some of the articles on lazy loading of images, that they often put a common placeholder images on the `.src` attribute and then put the real image URL on a custom attribute. This keeps the real URL from loading, but prevents broken images from showing. – jfriend00 Jan 18 '12 at 04:54
  • What about something more along the lines of this? http://www.appelsiini.net/projects/lazyload Realizing that I could call this lazy loading of images led me to that and it seems perhaps to be a nice holistic solution. – ylluminate Jan 18 '12 at 05:06
0

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();
ylluminate
  • 12,102
  • 17
  • 78
  • 152