Lazy loading

Custom image delivery and optionally processed once into the viewport

Installation
Overview
Basic usage
Settings
Apply on image
Apply on any tag
Methods
Force width and height
Crop position
Crop method
Background
Quality
Output
Progressive - Interleave
Orientation
Brightness
Contrast
Sharpen
Blur
Filters

Installation

jQuery must always be included before other files. Lazy loading requires the following files to work properly:

    <script src="path/to/jquery.js"></script>
    <script src="path/to/in-view.min.js"></script>
    <script src="path/to/lazy-loading.js"></script>

Overview

Lazy loading is intended to improve web page performances and speed. It includes an image server that manipulates images on-the-fly with a cache. Each image is processed and displayed when user reaches it into the viewport.

Basic usage

With the data-src custom attribute which always contains the URL to the master image. The image server processes every HTML tag with custom attribute data-src. It detects current thumbnail or HTML tag width, height, gets user device pixel ratio, processes the master image and returns a custom cached computed image with:

Pixel density aware width
Pixel density aware height
Master image cropped or just resized
Options
- Orientation
- Background color
- Conversion (jpg, png, webp, gif)
- Sharpen
- Blur
- Brightness
- Contrast
- Filter
- And more
Lazy loading is executed each time window is resized

In the example below, lazy loading Javascript detects the data-src element - which can be an img or any HTML tag - gets its width, height, gets device pixel ratio and then processes the master image with the default and/or custom parameters (see more into this page). See original image

In the followind example, resize the window to see the lazy loading update

    <img src="../img/loader.svg" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg">
    <style>
        /* DEMO ONLY */
        img {position:absolute;top:0;left:0;width:100%;height:100%}
    </style>

    <script>
        // DEMO ONLY
        lazyLoading.start();
        jQuery(window).on('load', function() {
            var jQ_img = jQuery('img').eq(0);
            var width = jQ_img.width();
            var height = jQ_img.height();
            var dpr = devicePixelRatio;
            jQuery('body').append(
                '<p class="u-absolute u-top-0 u-left-0 u-p-sm u-bc-neutral-light-max u-m-none">'+
                    'HTML tag with <code>data-src</code> width and height: <mark>'+width+'px x '+height+'px</mark><br>'+
                    'Device pixel ratio: <mark>'+dpr+'</mark><br>'+
                    'Computed image dimensions: <mark>'+width*dpr+'px x '+height*dpr+'px</mark>'+
                '</p>'
            );
        })
    </script>

Settings

lazy-loading.js contains lazyLoading.defaults object with all default settings:

Parameter	Type	Description
`imageServerUrl`	string	URL of image server
`cropPosition`	string	Position of the crop. Available positions: c,center,t,top,l,left,r,right,b,bottom,c,center
`quality`	number	Default image quality. Values between 1 and 100. Only relevant if the format is set to jpg.
`progressive`	boolean	Progressive jpg or interleave for other formats
`background`	string	Default background color. Learn more here
`loadMasterImageOnFail`	boolean	If image processing fails, then loads the master image
`cropMethod`	string	cover: Crop the image to cover both provided dimensions (does not change aspect ratio). contain: Embed within both provided dimensions (does not change aspect ratio). fill: Crop the image to cover both provided dimensions.

Apply on image

In this basic example, the computed image uses the same area as the thumbnail, depending on its own HTML and CSS declarations.

    <p>
        <img width="300" height="300" src="../img/loader.svg" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg">
        <img width="150" height="300" src="../img/loader.svg" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg">
        <img width="150" height="150" src="../img/loader.svg" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg">
        <img width="150" height="75" src="../img/loader.svg" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg">
    </p>
    <p><img src="../img/loader.svg" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" style="width:100%; height:auto"></p>

Apply on any tag

Lazy loading can be applied on any HTML5 through background-image CSS property. Then it takes the background-size: cover behavior by default.

    <ul data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg">
        <li>First line</li>
        <li>Second line</li>
        <li>Third line</li>
    </ul>
    <p data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg">Tempor exercitation ipsum velit do elit enim occaecat mollit voluptate voluptate in sunt cupidatat consequat. Proident ut labore sit minim qui esse cupidatat officia occaecat ad cupidatat id. Ipsum officia ex est eu. Eiusmod eu minim veniam et non nisi eiusmod laborum minim.</p>
    <style>
        /* DEMO ONLY 
        body { color: white; }
        body p { padding: 2em; }*/
    </style>

Methods

lazyLoading.start() Just need to be run once when you want to execute. lazyLoading.update() can be invoked any time to refresh or when DOM elements where changed.

Type	Example	Description
undefined	`lazyLoading.update()`	Process any HTML tag with data-src attribute and without .lazy class.
number	`lazyLoading.update(300)`	Process any HTML tag with data-src attribute and without .lazy class after the specified delay in ms.
object	`lazyLoading.update(el)`	Processes the specified element.
string	`lazyLoading.update('force')`	Force image rebuild by resetting each data-src.

Force width and height

data-width number Force the width of the computed image.
data-height number Force the height of the computed image.

    <figure>
        <img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" width="200" height="200">
        <figcaption>Std image processed 200px width and height</figcaption>
    </figure>
    <figure>
        <img data-width="20" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" width="200" height="200">
        <figcaption>Image occupies its specified width and height (200px) but native width is forced to 20px</figcaption>
    </figure>
    <figure>
        <img data-height="20" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" width="200" height="200">
        <figcaption>Image occupies its specified width and height (200px) but native height is forced to 20px</figcaption>
    </figure>

Crop position

data-crop-position string Force the crop position: t,top,l,left,r,right,b,bottom,c,center.

    <p>
        <img data-crop-position="top" style="height:75px;width:150px" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg">
        <img data-crop-position="center" style="height:75px;width:150px" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg">
        <img data-crop-position="bottom" style="height:75px;width:150px" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg">
    </p>
    <p>
        <img data-crop-position="left" style="height:150px;width:75px" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg">
        <img data-crop-position="center" style="height:150px;width:75px" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg">
        <img data-crop-position="right" style="height:150px;width:75px" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg">
    </p>
    <style>
        /* DEMO ONLY */
        img { vertical-align: top; }
    </style>

Crop method

data-crop-method string Force the crop method:

cover default: Crop the image to cover both provided dimensions.
contain: Embed within both provided dimensions. The remaining space can be filled with a background color by using &bg=
fill: Ignore the aspect ratio of the input and stretch to both provided dimensions.

    <p>
        1. <img style="height:100px;width:100px" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg">
        2. <img data-crop-method="fill" style="height:100px;width:100px" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg">
        3. <img data-crop-method="contain" style="height:100px;width:100px" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg">
        4. <img data-crop-method="contain" data-background="888888" style="height:100px;width:100px" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg">
    </p>
    <p>
        5. <img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/08/logo_DEALER_00000406_001.png" style="height:100px;width:100px">
        6. <img data-crop-method="contain" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/08/logo_DEALER_00000406_001.png" style="height:100px;width:100px" data-quality="51">
        7. <img data-crop-method="fill" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/08/logo_DEALER_00000406_001.png" style="height:100px;width:100px" data-quality="52">
        8. <img data-crop-method="contain" data-background="EEEEEE" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/08/logo_DEALER_00000406_001.png" style="height:100px;width:100px" data-quality="53">
    </p>
    <style>
        /* DEMO ONLY */
        img { border: 1px solid green; }
    </style>

Background

data-background string Apply a HEX color as background color applicable on images with transparency. Supports the following hexadecimal formats:

Color names supported by all modern browsers
3 digit RGB: CCC
4 digit ARGB (alpha): 5CCC
6 digit RGB: CCCCCC
8 digit ARGB (alpha): 55CCCCCC

    <p>
        <img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/08/logo_DEALER_00000406_001.png" src="https://imgservprod.bymycar.fr/image/?apikey=a15340303ea62780ec69802bda357e12&url=bymycar.fr/webzine/wp-content/uploads/2017/08/logo_DEALER_00000406_001.png&h=75">
        <img data-background="22123456" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/08/logo_DEALER_00000406_001.png" src="https://imgservprod.bymycar.fr/image/?apikey=a15340303ea62780ec69802bda357e12&url=bymycar.fr/webzine/wp-content/uploads/2017/08/logo_DEALER_00000406_001.png&h=75" data-quality="51">
        <img data-background="88BA9856" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/08/logo_DEALER_00000406_001.png" src="https://imgservprod.bymycar.fr/image/?apikey=a15340303ea62780ec69802bda357e12&url=bymycar.fr/webzine/wp-content/uploads/2017/08/logo_DEALER_00000406_001.png&h=75" data-quality="52">
    </p>

Quality

data-quality number between 0 to 100. Force the output quality to the specified value: 100 = Best and 1 = Worst. Default is 85.

    <p>
        <img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" data-quality="1"><br>
        quality 1
    </p>
    <p>
        <img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" data-quality="8"><br>
        quality 8
    </p>
    <p>
        <img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" data-quality="16"><br>
        quality 16
    </p>
    <p>
        <img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" data-quality="32"><br>
        quality 32
    </p>
    <style>
        /* DEMO ONLY */
        img { width:23vw; height:100px; }
        p { display:inline-block; }
    </style>

Output

data-output string. Force the output image format to the specified value: jpg, gif, png, webp.

    <p>
        <img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/08/logo_DEALER_00000406_001.png"><br>
        <mark><strong>original</strong> png image with transparency</mark>
    </p>
    <p>
        <img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/08/logo_DEALER_00000406_001.png" data-output="jpg">
        <img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/08/logo_DEALER_00000406_001.png" data-output="jpg" data-background="BA9856"><br>
        <mark><strong>jpg output</strong> with default and custom color</mark>
    </p>
    <p>
        <img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/08/logo_DEALER_00000406_001.png" data-output="gif">
        <img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/08/logo_DEALER_00000406_001.png" data-output="gif" data-background="BA9856"><br>
        <mark><strong>gif output</strong> with default and custom color</mark>
    </p>
    <p>
        <img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/08/logo_DEALER_00000406_001.png" data-output="webp">
        <img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/08/logo_DEALER_00000406_001.png" data-output="webp" data-background="BA9856"><br>
        <mark><strong>webp output</strong> with default and custom color</mark>
    </p>
    <style>
        /* DEMO ONLY */
        img { width:400px; height:100px;}
    </style>

Progressive - Interleave

data-progressive boolean. Adds interlacing to GIF and PNG. JPEG’s become progressive.

    <p><img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" data-progressive="true"><br>progressive jpg</p>
    <p><img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg"><br>
    non progressive jpg</p>
    <p><img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/08/logo_DEALER_00000406_001.png" data-progressive="true"><br>interleaved png</p>
    <style>
        /* DEMO ONLY */
        img { width:300px; height:200px;}
        p { display: inline-block; }
    </style>

Orientation

data-orientation string. Applies a flip on the image.

flipx Flips the image about the vertical Y axis
flipy Flips the image about the horizontal X axis
flipxy Flips both X and Y, rotates 180 degrees

    <p><img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/08/logo_DEALER_00000406_001.png" data-orientation="flipx"><br>flipx</p>
    <p><img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/08/logo_DEALER_00000406_001.png" data-orientation="flipy"><br>flipy</p>
    <p><img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/08/logo_DEALER_00000406_001.png" data-orientation="flipxy"><br>flipxy</p>
    <style>
        /* DEMO ONLY */
        img { width:200px; height:50px;}
        p { display: inline-block; }
    </style>

Brightness

data-brightness number between -100 and +100. Adjust the computed image brightness to the specified value.

    <p><img data-brightness="-10" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" data-quality="53"><br>brightness -10</p>
    <p><img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" data-quality="60"><br>Original</p>
    <p><img data-brightness="20" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" data-quality="54"><br>brightness +20</p>
    <style>
        /* DEMO ONLY */
        img { width:30vw; height:200px;}
        p { display: inline-block; }
    </style>

Contrast

data-contrast number between -100 and +100. Adjust the computed image contrast to the specified value.

    <p><img data-contrast="-20" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" data-quality="45"><br>contrast -20</p>
    <p><img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg"><br>Original</p>
    <p><img data-contrast="20" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" data-quality="46"><br>contrast +20</p>
    <style>
        /* DEMO ONLY */
        img { width:30vw; height:200px;}
        p { display: inline-block; }
    </style>

Sharpen

data-sharpen number. Sharpens the computed image.

1 Soft sharpening
2 High sharpening

    <p><img data-sharpen="1" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" data-quality="47"><br>sharpen 1</p>
    <p><img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" data-quality="60"><br>Original</p>
    <p><img data-sharpen="2" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" data-quality="48"><br>sharpen 2</p>
    <style>
        /* DEMO ONLY */
        img { width:30vw; height:200px;}
        p { display: inline-block; }
    </style>

Blur

data-blur number between 0 and 100. Blurs the computed image to the specified value.

    <p><img data-blur="2" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" data-quality="31"><br>blur 2</p>
    <p><img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" data-quality="60"><br>No blur</p>
    <p><img data-blur="4" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" data-quality="32"><br>blur 4</p>
    <style>
        /* DEMO ONLY */
        img { width:30vw; height:200px;}
        p { display: inline-block; }
    </style>

Filters

data-filter *greyscale*, *sepia* or *negate*. Applies a filter effect to the image.

    <p><img data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg"><br>Original</p>
    <p><img data-filter="greyscale" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" data-quality="33"><br>greyscale</p>
    <p><img data-filter="sepia" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" data-quality="34"><br>sepia</p>
    <p><img data-filter="negate" data-src="https://www.bymycar.fr/webzine/wp-content/uploads/2017/07/koleos2.jpg" data-quality="35"><br>negate</p>
    <style>
        /* DEMO ONLY */
        img { width:23vw; height:200px;}
        p { display: inline-block; }
    </style>