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.
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.