Lazy boot plugin for loading images as custom scrolls?

Question

I really like the lazy download plugin, and I'm gutted, it does not work in new browsers.

In any case, can I write my own code that does not load images under 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 could nail this nail, it is a pity the appelsiini site is no longer supported.

I found a site that works in all browsers http://haw-lin.com/ , and it uses a very similar script plugin for http://www.appelsiini.net/projects/lazyload . There is no MIT license, and it is difficult for me to decrypt it.

What kind of jQuery image is the lazy download plugin you can recommend?

Answer 1

The jQuery image lazy load plugin demo does not seem to work for me on FF3.6 on a Mac. I watched HTTP requests with the Net Firebug tab, and I could see that all uploaded images were uploaded.

You can check out this plugin called JAIL , which works great (some HTML changes are required). I especially recommend looking at examples.

Answer 2

If you look at the jquery_lazyload forks in github , some of them fix problems using new browsers .

Answer 3

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

JQuery Lazy Loader Post

JQuery Lazy Loader Plugin Page

Here is 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 end the content you want to be lazy, load with the placeholder tag and internal HTML comment. When the placeholder becomes visible in the viewport, it is replaced with an HTML line inside the comment.

You can use any tag for placeholder, but I like pre because it displays as size 0 when there is only a comment inside.