Namespace: imageSrcset

db.libs.imageSrcset

Layzyload images

Source:

Members

(private, static) deffered :nodeList

The nodeList for all the images to lazyload using the data-defer attribute
Type:
nodeList
Source:

(private, static) images :nodeList

The nodeList for all the images on the page using data-srcset
Type:
nodeList
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) getDefferedImages()

Returns the list of deferred images

Source:

(static) getImages()

Returns the list of images

Source:

(static) init()

Initialize the component

Source:

(static) load(element) → {element}

Loads a given image

Parameters:
Name Type Description
element element
Source:
Returns:
element
Type
element

(private, static) loadImages()

Re-evaluate all images and load the correct src from data-srcset

Source:

(private, static) loadImagesInView()

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

Source:

(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(element) → {element}

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

Parameters:
Name Type Description
element element
Source:
Returns:
element
Type
element