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.