21

I'm currently redesigning my website and have been looking into using JavaScript and jQuery. Here is what I have so far: http://www.tedwinder.co.uk/gallery2/.

My vision is to have all of the photos on one page, which the user can scroll through, like now. However, I understand the limitations and effects of having 50+ large-ish images on one page and have considered using infinite scrolling and lazy loading, which I understand would only load the images when the user gets to them, or when they click on a "More" link?

So, my question is: would this reduce the page load, how exactly would I go about implementing infinite scrolling/lazy loading and would this work effectively, or could you think of any more effective way of doing this?

Thanks, Ted

Ted
  • 245
  • 2
  • 3
  • 5

4 Answers4

12

This is a pretty good plugin for jQuery that handles image lazy loading.

http://www.appelsiini.net/projects/lazyload

Images below the fold wont be loaded until they are scrolled into view.

It will cut down on the bandwidth of your site, but if you dont have a lot of traffic it wont make much of a difference.

For an example of this technique in use, check out http://mashable.com/

Pepper
  • 2,932
  • 4
  • 25
  • 26
  • Download jQuery from http://jquery.com/ then follow the steps on the page that I linked to above. Sorry, but I cant explain it better than the guide on that page :) Good luck! – Pepper Jan 31 '10 at 15:03
  • A great example is also (very appropriately) api.jquery.com. The whole comments section of any page is loaded lazily! – Agos Jan 31 '10 at 15:51
  • 6
    Sadly this plugin is not currently working. From the author: _"Lazy Load is currently not usable. It does not work with the latest browsers as expected."_ Does anyone know of a viable alternative? – Drew Noakes Jun 22 '11 at 15:51
  • 1
    Looks like it's working now, with modifications: "_Latest version of Lazy Load is not a drop in replacement to your webpage._" – Jess Telford Mar 04 '12 at 23:32
  • As noted by the plugin author, this is not a 'drop-in' as it requires modifications to the html. The [1.5.0 version](https://github.com/tuupola/jquery_lazyload/blob/1.5.0/jquery.lazyload.js) was drop-in. In any case, are there any recent drop-in lazy image loaders for jQuery? (Sorry, don't want to change HTML markup, no real reason to IMO.) – Inactivist Dec 02 '12 at 02:20
  • hi, It seems [this](http://luis-almeida.github.io/unveil/) plugin serves `high-resolution images` to devices with retina displays, is that true ? – Shaiju T Jul 29 '15 at 22:42
4

try this jQuery Lazy Scroll Loading Plugin http://code.google.com/p/jquerylazyscrollloading/

h920526
  • 51
  • 1
3

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.

Hope this helps! @MW_Collins

Michael Collins
  • 59
  • 2
0

Here's two more JQuery plugins that do lazy loading / infinite scroll:

http://jscroll.com/

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

Paul B. Hartzog
  • 341
  • 3
  • 6