Fork me on GitHub

Progressively

A JavaScript library to load images progressively.

Progressively is a javascript library for loading images progressively. It’s written entirely in JavaScript so it doesn’t depend on 3rd-party libraries like jQuery. It's super small, < 1.2kB when minified & gzipped! It will load images on when user browse to the page, saving bandwidth & server requests.

Usage & Api

  • Installation

    bower install progressively

    OR

    npm install progressively
  • Add Files

    <link rel="stylesheet" src="progressively.min.css">

    <script type="text/javascript" src="progressively.min.js">
  • Initialize

    progressively.init(options);
  • .init() (options)

    The init() API takes a few options

    throttle

    Type: Number, Default: 300

    The throttle is managed by an internal function that prevents performance issues from continuous firing of window.onscroll events. Using a throttle will set a small timeout when the user scrolls and will keep throttling until the user stops. The default is 300 milliseconds.

    delay

    Type: Number, Default: 100

    The delay function sets the timout value for images to start load asynchronously. Ideally it's value should be low.

    onLoad

    Type: Function, Arguments: HTMLElement

    The imgload function is invoked whenever an image elements finishes loading. It accepts HTMLElement as an argument which is the current element that is loaded.

    onLoadComplete

    Type: Function, Arguments: None

    The afterload function is callback function which executes when all images have loaded. It is fired when all the image elements have the *--is-loaded class.

Download