All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section

Ink.UI.LazyLoad_1 class

Stops the browser from loading a barrage of content at once.

This delays the loading of images and other content until the corresponding elements are visible in the browser viewport. This was created to load images later, but can be also used for widgets which are slow to load and are only useful when on screen.

This works through copying the src attribute into data-src, and placing a placeholder string in the src attribute. Then, when the element is on screen, the data-src attribute is copied back to src and the content starts loading. You can use the options below to change what attributes are involved in the exchange.

You can also provide your onInsideViewport callback and use it to start widgets which need javascript, such as an interactive map or an animation.

Methods
Method name	Description
new LazyLoad_1(selector, [options])	Constructor
.destroy()	Destroy this component
.reload()	Load or reload the component.

new Ink.UI.LazyLoad_1(selector, [options])

Accepts

selector
The element which contains the lazily-loaded items.
options
Options object, containing:
options.item
Item selector. Defaults to '.lazyload-item'.
options.placeholder
Placeholder value for items which are not 'visible', in case they don't already have a value set.
options.loadedClass
Add this class to the images when they're loaded.
options.source
Source attribute. When an item is 'visible', use this attribute's value to set its destination attribute. Defaults to 'data-src'.
options.destination
Destination attribute. Attribute to change when the element is 'visible'. Defaults to 'src'.
options.delay
Milliseconds to wait before trying to load items. Defaults to 100.
options.delta
Offset distance in pixels. Determines how far the top of an item must be from the viewport be considered 'visible'. Negative values shrink the considered 'visible' viewport while positive values enlarge it. Defaults to 0.
options.image
Set to false to make this component do nothing to any elements and just give you the onInsideViewport callback.
options.scrollElement
(advanced) What element is to be listened for the scroll event. Defaults to document.window.
options.touchEvents
Subscribe to touch events in addition to scroll events. Useful in mobile safari because 'scroll' events aren't frequent enough. Defaults to true.
options.onInsideViewport
Callback function for when an `item` is 'visible'. Receives an object containing the item's element as an argument.
options.onAfterAttributeChange
(advanced) Callback function when an item's attribute changes. Receives an object containing the item's element as an argument.
options.autoInit
(advanced) Set to false if you want to start LazyLoad yourself with `reload()`. Defaults to true.

Basic usage

In the example below the defaults are set to load the images only when they are 300px into the screen.

Demo

If you want to see these items loading again, scroll back up and reload the page.

Code

<div id="my-lazy-load">
    <img data-src="https://cdn.ink.sapo.pt/2.2.1/img/shot_meo.png" class="lazyload-item quarter-vertical-space">
    <img data-src="https://cdn.ink.sapo.pt/2.2.1/img/shot_musicbox.png" class="lazyload-item quarter-vertical-space">
    <img data-src="https://cdn.ink.sapo.pt/2.2.1/img/shot_intra.png" class="lazyload-item quarter-vertical-space">
    <img data-src="https://cdn.ink.sapo.pt/2.2.1/img/shot_ink.png" class="lazyload-item quarter-vertical-space">
    <img data-src="https://cdn.ink.sapo.pt/2.2.1/img/shot_pessoa.png" class="lazyload-item quarter-vertical-space">    
</div>

<script type="text/javascript">
Ink.requireModules(['Ink.UI.LazyLoad_1', 'Ink.Dom.Element_1'], function(LazyLoad, InkElement) {
    new LazyLoad('#my-lazy-load', {
        delta: -300,
        placeholder: 'https://cdn.ink.sapo.pt/2.2.1/img/logo_home.png'
    });
});
</script>

.destroy() method

Destroy this component

.reload() method

Load or reload the component.
Adding the 'scroll' event listener if necessary and checks if anything needs to be loaded now.

You can use this to manually invoke the loading logic without user action.