Class: Lazymg

Responsiville. Lazymg

Causes an image to lazy load. This means that it tries to prevent the image from loading during normal page load time and makes it load the moment it appears in the browser viewport.

new Responsiville.Lazymg(options)

responsiville.lazymg.js, line 48

Lazy loading images utility.

Name	Type	Description
`options`	Object	The initialisation options of the module.

Properties:

Name Type Description

options

Object

The options that define the object behaviour.

Properties

Name	Type	Description
`debug`	boolean	Whether to print debug messages in the browser console.
`slug`	boolean	A special codename for the instance of the element, to be used as a class on its container and as a key in arrays where it is grouped with other elements of its kind.
`element`	boolean	The image element to run on.
`src`	boolean	The image url to be lazy loaded.
`cssBackground`	boolean	Signifies that the image to be lazy loaded is actually in the CSS background of the given element.
`offsetTop`	integer	How much to delay the parallax effect in terms of space, after the watched element has appeared in the browser viewport.
`offsetBottom`	integer	How much to make completion faster in terms of space for the parallax effect.
`enter`	string	Comma separated list of breakpoints in which the module enters, which means it is enabled.
`leave`	string	Comma separated list of breakpoints in which the module leaves, which means it is disabled.

Author:

Nevma, info@nevma.gr

License:

Nevma Copyright (c) http://www.nevma.gr

Fires:

Responsiville.Lazymg#event:init

Extends

Members

staticResponsiville.Lazymg.AUTO_RUN

Properties:

Name	Type	Description
`AUTO_RUN`	boolean	Controls whether this module should run by default, without the developer calling it, using its default settings. Defaults to true.

staticResponsiville.Lazymg.defaults

Properties:

Name	Type	Description
`defaults`	Object	Default values for this module settings.

Methods

staticResponsiville.Lazymg.autoRun(){void} responsiville.lazymg.js, line 207

Runs through the page and searches for elements that apply to the current module in order to apply it to them automatically. Useful for automatically creating elements with this module's behaviour just by setting up the predefined classes and data attributes in HTML elements of the page.

Returns:

Type	Description
void

staticResponsiville.Lazymg.getElement() responsiville.lazymg.js, line 228

Returns the element of interest, that is the image being handled for lazy loading wrapped in jQuery.

Returns:

void

appearImageByCSSBg(){void} responsiville.lazymg.js, line 413

The function that runs when the image first appears, ie enters the browser viewport. It sets the image src attribute back to what is was meant to be in the first place.

Fires:

Responsiville.Lazymg#event:appear

Returns:

Type	Description
void

appearImageBySrc(){void} responsiville.lazymg.js, line 374

The function that runs when the image first appears, ie enters the browser viewport. It sets the image src attribute back to what is was meant to be in the first place.

Fires:

Responsiville.Lazymg#event:appear

Returns:

Type	Description
void

disable(){void} responsiville.lazymg.js, line 452

Disables the lazy image. It does not deactivate it. It simply disables it, so it does not function any more when the necessary trigger is fired. Useful in responsive design where the lazy image might be a required feature in desktops but useless in mobile devices.

Fires:

Responsiville.Lazymg#event:disabled

Returns:

Type	Description
void

enable(){void} responsiville.lazymg.js, line 276

Enables the lazy image. It does not activate it. It simply enables it, so when the necessary trigger is fired then the lazy image behaviour begins. Useful in responsive design where the lazy image might be a required feature in desktops but useless in mobile devices.