WebAppers

/ best free open source web resources /

Shopify

Delays Loading of Images with Lazy Loader jQuery Plugin

Posted · Category: MIT License, Tools

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. This is opposite of image preloading.

Using Lazy loader on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

There are options for control maniacs who need to fine-tune. You can set threshold on how close to the edge image should come before it is loaded. You can also set placeholder image and custom event to trigger loading. You can check out the demo with FadeIn Effect enabled.

Requirements: jQuery Framework
Demo: http://www.appelsiini.net/projects/lazyload/enabled_fadein.html
License: MIT License

3 Comments
  • Rich

    Thanks so much for pointing this out, I have seen this a lot of some graphically intensive websites.

  • http://untu.ms/ Reinis I.

    “Lazy loader is a jQuery plugin written in JavaScript.”

    As opposed to the ones not written in JS?

  • http://sebarmeli.com Sebastiano Armeli

    Alternatively to jQuery Lazy Load (the demo page doesn’t work on my FF3.6/Mac), you can use Jquery Asynchronous Image Loader (JAIL) plugin for jQuery. You can find more details at the Project Homepage

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons