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.