Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

lazy load plugin to load images as user scrolls?

Tags:

jquery

I really like the lazy load plugin and I am gutted it's not working on new browsers.

Is there anyway I can write my own code that doesn't load the images below the fold until the user scrolls?

<img _src="/fullscreen/img/You are everywhere 2.png" class='lazyLoad' />

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.
})

It would be great if I can get this nailed, it's a pity the appelsiini site isn't supported any longer.

I found a site that works in all browsers http://haw-lin.com/ and it's using a very similar plugin script to http://www.appelsiini.net/projects/lazyload. There's no MIT license and I find it difficult to decipher.

What jQuery image lazy load plugin can you recommend?

like image 854
Tara Irvine Avatar asked Jan 06 '11 18:01

Tara Irvine


People also ask

Should I lazy load images?

And now the question is: when it's recommended to use lazy loading? You should always use lazy loading for the images below the fold. As we explained, lazy loading will reduce the real and perceived loading time. User experience will benefit from it — and you users will thank you.

How do you lazy load an image in CSS?

Using browser-level lazy-loading #This attribute can be added to <img> elements, and also to <iframe> elements. A value of lazy tells the browser to load the image immediately if it is in the viewport, and to fetch other images when the user scrolls near them. Note <iframe loading="lazy"> is currently non-standard.

How do I get lazy offscreen images?

With browser lazy loading, you only need to add a loading attribute with a value of lazy to the img tag in the HTML markup. Put simply, all you need to do is tell the browser which images to lazy load. No JavaScript, APIs, or calculations required.


1 Answers

The demo page of jQuery image lazy load plugin doesn't seem to work to me on FF3.6 on Mac. I was watching the HTTP requests with the Net tab of Firebug and I could see all the images loaded onload.

You can check out this plugin called JAIL that works perfectly (requires some HTML changes though). I especially suggest to look at the the examples.

like image 91
sebarmeli Avatar answered Nov 13 '22 17:11

sebarmeli