Late images

Lightweight javascript browser library to lazy load images as they enter viewport. Has no big dependencies and weighs less than 2KB.

Average website usually comes with lot of images that are downloaded well before users actually have a chance to see them. Lazy loading of images can help with your performance budget. Late images is a small library with simple api. It does not rely on jQuery but comes with convenient adapter.

Examples and api

Next few images should fade in as you scroll down:

Late images come with jQuery adapter included - to lazy load this images we had to write was following code.


            $('.lateImage').lateImages();

Html was structured like so:

Image fade in was achieved via simple css animation that was trigged when new class was applied to element.

Same result in plain javascript (without jQuery) is achieved like so:



            var elements = Array.prototype.slice.call(
                document.getElementsByClassName('lateImage')
            );

            elements.forEach(function(element) {
                new LateImage(element);
            });

Library options are passed via second parameter to constructor. If we want to start loading images 100 pixels before user scroll position we setup call like so:



            // when used via jQuery plugin facade
            $('.lateImage').lateImages({threshold: 100});

            // plain js
            new LateImage(element, {threshold: 100});

Image lazy load can be stopped at any time by obtaining late image instance and calling destroy method on it.


            // get instance via jQuery
            var lateImage = $('.lateImage').lateImages().data('lateImage');
            // or
            var lateImage = new LateImage(element);

            // sometime later
            lateImage.destroy();

Every late image instance will work with following defaults merged with options you passed to constructor.



            LateImage.defaults = {
                srcAttribute: 'data-src',
                altAttribute: 'data-alt',

                doneCallback: null,
                failCallback: null,

                threshold: 0,

                loadingClass: 'lateImageLoading',
                loadedClass: 'lateImageLoaded',
                errorClass: 'lateImageError',

                enableViewportCheck: true
            };

Installation

Late images is packaged as UMD library so you can use it in CommonJS and AMD environment or with browser globals.


            // install via npm
            npm install late-images --save

            // if you use bundler
            var LateImage = require('late-images');

            // or just using browser globals
            var LateImage = window.LateImage;

For browser usage browse dist folder - if working with build tools go with src folder. Download library files from github repo, get them via bower (bower install lateImages) or via npm (npm install late-images)