Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
53 lines (40 sloc) 1.15 KB

jQuery lazyload

jQuery lazyload makes your site faster.

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


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" />
        <img src="original-image.jpg" />

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.

          $('img.lazy').lazyload({threshold: 30});

Hide placeholder images if JavaScript is off

        img.lazy { display: none }