Progressively – Load Images One by One

Progressively - Lazy Loading - JavaScript Library

Performance optimization is quite crucial for web designers and developers. No matter how well-designed is a website or web app it will surely fail if it is not optimized for varying network conditions.

It is really wrong to assume that all visitors will have fast broadband speed. Users browse from different devices and networks so their speed vary. As a consequence they load content differently so that it is more then important to pay attention to performance and put some effort on speed optimization in order to save bandwidth and server requests. This is particularly true for websites relying on a great volume of visual content. Many images mean lots of bandwidth and server requests.

There are many solutions for coping with heavy visual content, one of which is to load images progressively, in other words lazy loading. Many jQuery plugins and library are offering ways to cope with images and their loading. Many of them are relying on third-party libraries to perform which can also slow down the load times.

Progressively is a bit different solution.
It is a JS library, which is actually completely written in JavaScript, and it does not depend on any other libraries such as jQuery. It is very small (under 1.2KB minified and gzipped) and it loads images when users browse to the point of the page where the image is. In this way, it saves server requests and bandwidth.

Here is how to implement and use:

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.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

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.

Demo Download



You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *