Progressively – Load Images One by One
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.
Here is how to implement and use:
bower install progressively
npm install progressively
<link rel="stylesheet" src="progressively.min.css">
The init() API takes a few options
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.
The delay function sets the timout value for images to start load asynchronously. Ideally it’s value should be low.
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.
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