lazy loading of images on my webpage

Question

hello everbody,

after some research and after I've asked some questions, I've realized the following: jQuery plugin Lazy Load (http://www.appelsiini.net/projects/lazyload) doesn't work on Safari and even not on Firefox.

I've just tested their demo.

Please you need to use Firebug, and see how all the images are loaded at once at the beginning and then loaded again on scroll (so you actually have double downloading).

Could you give me a solution how to implement the mashable.com images lazy layout ?

thanks

Answer 1

do this

 <img alt='some_text'  _src="img_url" class='lazyLoad'>
  // please note i have added underscore character before 'src'

jQuery(function(){
     jQuery('.lazyLoad').each(function(){
           var _elm= jQuery(this);
           _elm.attr('src',_elm.attr('_src'));

           //on DOM ready loop through each 
          //image with class=lazyLoad and add src attribute to it.
       })
});