Documentation

Module: rgjs/img

RGJS6 Img module.

Methods

<static> aspectRatio(img)

Calculate aspect ratio of an image.
Note: based on naturalWidth/-Height, width/height as fallback.

Parameters:
Name Type Description
img Image

An image element.
Returns:

The aspect ratio. 1.0 = square, <1.0 = portrait, >1.0 = landscape, 1.0 on failure.

Type
float
Example
const img = document.querySelector('img');
rgjs.img.aspectRatio(img); // 1.33

<static> isLandscape(img)

Check if an image is landscape.

Parameters:
Name Type Description
img Image

An image element.
Returns:

True of false.

Type
Boolean
Example
const img = document.querySelector('img');
rgjs.img.isLandscape(img); // `true` or `false`

<static> isPortrait(img)

Check if an image is portrait.

Parameters:
Name Type Description
img Image

An image element.
Returns:

True of false.

Type
Boolean
Example
const img = document.querySelector('img');
rgjs.img.isPortrait(img); // `true` or `false`

<static> isSquare(img)

Check if an image is square.

Parameters:
Name Type Description
img Image

An image element.
Returns:

True of false.

Type
Boolean
Example
const img = document.querySelector('img');
rgjs.img.isSquare(img); // `true` or `false`

<static> isTransparent(img [, opts] [, fallback])

Check if image is transparent.
Uses the top-left corner and checks sqrt(opts.samples) x sqrt(opts.samples) pixels.
Note: cross-origin images will always return fallback value! Don't forget to add <img crossorigin='Anonymous' />!

Parameters:
Name Type Argument Description
img Image

An image element.
opts object <optional>

Options.

Properties
Name Type Argument Default Description
samples number <optional>
 16

Number of samples used to determine transparency.
debug Boolean <optional>
 false

If true, output errors in console.
fallback Boolean <optional>

Fallback value when transparency could not be resolved.
Returns:

True or false.

Type
Boolean
Example
const img = document.querySelector('img');
rgjs.img.isTransparent(img); // `true` or `false`

<static> lazyload(containerSelector, imageSelector [, opts])

Lazyload images. Uses IntersectionObserver if available.

If Intersection Observer is supported:

  • Only images that are in the viewport and visible will be loaded.
  • An existing observer instance is used when options match.
  • Image elements should only have one observer. If [img1, img2] have an observer, and a new one is created for [img2, img3] (because options don't match, for example), the first observer is detached for img2 but not for img1. In other words: all three images are observerd; img1 by 'observer 1', img2 and img3 by the new 'observer 2'.
  • Use opts.debug to investigate exact behaviour.

If Intersection Observer is not supported:

  • Only visible elements will be loaded.
Parameters:
Name Type Argument Default Description
containerSelector *

The container to search. Defaults to document.body.
imageSelector *

The selector for images. Defaults to 'img[lazyload]'.
opts object <optional>
 {}

Optional. Params: cb, cberr.

Properties
Name Type Argument Description
cb function <optional>

Callback for each loaded image. Arguments: {Image} img.
cberr function <optional>

Callback for each error. Arguments: {Image} img, {Error} error.
allowNative boolean <optional>

Allow native lazyloading. If supported, intersection observer is bypassed and browser handles lazyloading. Experimental.
force boolean <optional>

Force (re)evaluating lazyload. Note: If true, intersection observer and native lazyload is bypassed!
debug boolean <optional>

Enables console.log output to debug IntersectionObserver behaviour.
Examples
// Image tag
&lt;img src='placeholder.png' data-src='full-image.png' lazyload /&gt;
// Default: Lazyload all &lt;img lazyload&gt;'s in the &lt;body&gt;
rgjs.img.lazyload();

// Lazyload all &lt;img lazyload&gt;'s in a specific element
rgjs.img.lazyload('.container');