Lazy Load Sideways

Latest version of Lazy Load is not a drop in replacement to your webpage. New browsers load image even if you remove the src attribute with JavaScript. Now you must alter your html code. Put placeholder image into src attribute of your img tag. Real image url should be stored data-original attribute.

<img data-original=“img/example.jpg” src=“img/grey.gif”>

Good thing is you can now put all your JavaScript to the end of the page. If you want to support non JavaScript browsers there is an extra step. You must include original image inside <noscript> tag. For more information read the documentation.

Lazy Load plugin has been quite popular recently. Atleast two Prototype ports have been created. First one by Edd Couchmann. Second one by Bram Van Damme. Congrats guys. Now Prototype people can enjoy lazy loading sweetness too.

I just added most requested feature. Sideways lazy loading of images in wide pages. I guess you could also call it right of fold_. Demo page herewide.html.

As an added bonus you get four new selectors: belowthefold, abovethefold, rightoffold and leftoffold. You can get some performance improvements using these. Attach plugin only to images below the fold with:

 $("img:belowthefold").lazyload();

Or do something with all paragraphs far away right on wide page:

  $("p:rightoffold").something();

There are still some issues I would like to solve. In meanwhile download latest from the project page.

Tagged with: Javascript Jquery Lazy load

Most read tags

Lazy Load Ruby AVR
Electronics JavaScript
Jeditable Maps jQuery
Facebook HTML5 Chained
Estonia

Google+