Namespace: imageDefer

db.libs.imageDefer

Layzyload images

Source:

Members

(private, static) images :array

The array for all the images to be lazy loaded
Type:
array
Source:

(private, static, constant) range :object

Ranges for targeting sizes in srcset
Type:
object
Source:

(private, static, constant) threshold :number

The threshold for when images in view should be loaded
Type:
number
Source:

Methods

(static) init()

Initialize the component

Source:

(static) load(id) → {external:jQuery}

Loads a given image

Parameters:
Name Type Description
id external:jQuery | string jQuery element or selector
Source:
Returns:
jQuery elements targeted
Type
external:jQuery

(private, static) loadImagesInView()

Loads all images with data-defer="view" attribute if they are within the viewport threshold

Source:

(private, static) loadImagesOnLoad() → {external:jQuery}

Loads all images with data-defer="load" attribute

Source:
Returns:
jQuery elements targeted
Type
external:jQuery

(private, static) parseSrcset(srcset, size) → {string}

Parse the data-srcset and return the url that matches given size

Parameters:
Name Type Description
srcset string A srcset formatted string
size string A string used in the regex to match a spesific size
Source:
Returns:
the url matching size
Type
string

(static) reflow()

Load all images that can be loaded

Source:

(private, static) setImageSrc(id) → {external:jQuery}

Set the image src based on width of page and what is in data-srcset or data-src

Parameters:
Name Type Description
id external:jQuery | string jQuery element or selector
Source:
Returns:
jQuery element
Type
external:jQuery