jQuery lazyload

jQuery lazyload makes your site faster.

It loads your images only when the user scrolls down the page.

Example

Put the images that will lazy load in this way

Noscript is necessary for the browsers with JavaScript off.

    
      <img class="lazy" src="placeholder.gif" original-src="original-image.jpg" />
      <noscript>
        <img src="original-image.jpg" />
      </noscript>
    
  

Load the library

    
      <script src="jquery.js"></script>
      <script src="jquery.lazyload.js"></script>
    
  

Turn on lazyload for the selected images

In this case, there is a 30px threshold, so the images will load when the fold is 30px from them. The threshold is optional.

    
      <script>
        $(function(){
          $('img.lazy').lazyload({threshold: 30});
        });
      </script>
    
  

Hide placeholder images if JavaScript is off

    <noscript>
      <style>
        img.lazy { display: none }
      </style>
    </noscript>