Layzyload images
- Source:
Members
(private, static) deffered :nodeList
The nodeList for all the images to lazyload using the
data-defer attribute - Type:
- nodeList
- Source:
- Type:
- nodeList
- Source:
- Type:
- object
- Source:
- Type:
- number
- Source:
- Source:
- Source:
- Source:
- Source:
- Type
- element
- Source:
- Source:
- Source:
- Type
- string
- Source:
- Source:
- Type
- element
(private, static) images :nodeList
The nodeList for all the images on the page using
data-srcset (private, static, constant) range :object
Ranges for targeting sizes in srcset
(private, static, constant) threshold :number
The threshold for when images in view should be loaded
Methods
(static) getDefferedImages()
Returns the list of deferred images
(static) getImages()
Returns the list of images
(static) init()
Initialize the component
(static) load(element) → {element}
Loads a given image
Parameters:
| Name | Type | Description |
|---|---|---|
| element | element |
Returns:
element
(private, static) loadImages()
Re-evaluate all images and load the correct src from data-srcset
(private, static) loadImagesInView()
Loads all images with data-defer attribute if they are within the viewport threshold
(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 |
Returns:
the url matching size
(static) reflow()
Load all images that can be loaded
(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 |
Returns:
element