CODEWITHSUNDEEP
jquery
Tara Irvine
Tara Irvine

Reputation: 819

lazy load plugin to load images as user scrolls?

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?

Upvotes: 6

Views: 5641

Answers (3)

Michael Collins
Michael Collins

Reputation: 59

You can try this jQuery plugin I wrote that uses HTML comments to lazy load any arbitrary bits of HTML, including images:

jQuery Lazy Loader Blog Post

jQuery Lazy Loader Plugin Page

Here's an example:

<pre class=”i-am-lazy” ><!–
    <img src=”some.png” />
 –></pre>

<pre class=”i-am-lazy” ><!–
    <div>Any, html css img background, whatever. <img src=”some.png” /> </div>
–></pre>

<script type=”text/javascript” src=”jquery.lazyloader.js” ></script>
<script type=”text/javascript” >
$(document).ready( function()
{
    $(’pre.i-am-lazy’).lazyLoad();
});
</script>

So basically you wrap the content you want to lazy load with a placeholder tag and and inner HTML comment. When the placeholder becomes visible in the viewport, it is replaced with the HTML string inside the comment.

You can use any tag for the placeholder but I like pre because it renders as 0 dimension when there's only a comment inside.

Upvotes: 1

sebarmeli
sebarmeli

Reputation: 18265

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.

Upvotes: 3

Matt V.
Matt V.

Reputation: 9809

If you look at the forks of jquery_lazyload in github, some of them address the issues with newer browsers.

Upvotes: 2

Related Questions