Lazy loading

  • Requires jQuery
  • Requires in-view.js
  • Requires lazy-loading.js

Lazy loading main features:

  • Image server that manipulates images on-the-fly with a cache.
  • Display image once into the viewport.

Basics

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

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). Original image 4407px x 3300px 1.91Mb

/* DEMO ONLY */ img {position:absolute;top:0;left:0;width:100%;height:100%} // 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( '

'+ 'HTML tag with data-src width and height: '+width+'px x '+height+'px
'+ 'Device pixel ratio: '+dpr+'
'+ 'Computed image dimensions: '+width*dpr+'px x '+height*dpr+'px'+ '

' ); })

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.

// DEMO ONLY lazyLoading.start();

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.

  • First line
  • Second line
  • Third line

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.

/* DEMO ONLY */ body { color: white; } body p { padding: 2em; } // DEMO ONLY lazyLoading.start();

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.
Std image processed 200px width and height
Image occupies its specified width and height (200px) but native width is forced to 20px
Image occupies its specified width and height (200px) but native height is forced to 20px
// DEMO ONLY lazyLoading.start();

Crop position

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

/* DEMO ONLY */ img { vertical-align: top; } // DEMO ONLY lazyLoading.start();

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.

1. 2. 3. 4.

5. 6. 7. 8.

/* DEMO ONLY */ img { border: 1px solid green; } // DEMO ONLY lazyLoading.start();

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

// DEMO ONLY lazyLoading.start();

Quality

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


quality 1


quality 8


quality 16


quality 32

/* DEMO ONLY */ img { width:23vw; height:100px; } p { display:inline-block; } // DEMO ONLY lazyLoading.start();

Output

data-output string. Force the output image format to the specified value: jpg, gif, png, webp (does not work on Safari).


original png image with transparency


jpg output with default and custom color


gif output with default and custom color


webp output with default and custom color

/* DEMO ONLY */ img { width:400px; height:100px;} // DEMO ONLY lazyLoading.start();

Progressive - Interleave

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


progressive jpg


non progressive jpg


interleaved png

/* DEMO ONLY */ img { width:300px; height:200px;} p { display: inline-block; } // DEMO ONLY lazyLoading.start();

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


flipx


flipy


flipxy

/* DEMO ONLY */ img { width:200px; height:50px;} p { display: inline-block; } // DEMO ONLY lazyLoading.start();

Brightness

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


brightness -10


Original


brightness +20

/* DEMO ONLY */ img { width:30vw; height:200px;} p { display: inline-block; } // DEMO ONLY lazyLoading.start();

Contrast

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


contrast -20


Original


contrast +20

/* DEMO ONLY */ img { width:30vw; height:200px;} p { display: inline-block; } // DEMO ONLY lazyLoading.start();

Sharpen

data-sharpen number. Sharpens the computed image.

  • 1 Soft sharpening
  • 2 High sharpening


sharpen 1


Original


sharpen 2

/* DEMO ONLY */ img { width:30vw; height:200px;} p { display: inline-block; } // DEMO ONLY lazyLoading.start();

Blur

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


blur 2


No blur


blur 4

/* DEMO ONLY */ img { width:30vw; height:200px;} p { display: inline-block; } // DEMO ONLY lazyLoading.start();

Filters

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


Original


greyscale


sepia


negate

/* DEMO ONLY */ img { width:23vw; height:200px;} p { display: inline-block; } // DEMO ONLY lazyLoading.start();