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
            };