Skip to main content

lazy-load

Moli's own Lazy Reload solution to lazy loading specific ad slot.

This module allows us to configure some slots with lazy loading behaviour, thus refresh adSlot only when the adSlot is intersected (seen) on the viewport.

Integration​

In your index.ts import the lazy-load module and register it.

import { LazyLoad } from '@highfivve/module-moli-lazy-load';

moli.registerModule(new LazyLoad({
  // Provide an array of domIds that should have lazy-loading behaviour,
  // and assign desired options to each group of domIds if required.

  slots: [
    { domIds: ['lazy-loading-adslot-1', 'lazy-loading-adslot-2'], options: {threshold: .5} },
    { domIds: ['lazy-loading-adslot-3'], options: {rootMargin: '20px'} }
  ],
  buckets: []
}, window));

Multiple infinite slots​

If you have infinite slots with different pageType values, you can use this to differentiate between them. Image you have a

  • search_content_x slot
  • result_content_x slot

You add a data-h5-slot-dom-id attribute to the infinite slot container, which will select the ad slot with this domId value from the moli slots.

<div class="ad-infinite" data-h5-slot-dom-id="search_content_x"></div>

If the data-h5-slot-dom-id is not provided, the first slot with loaded: infinite will be used.

Type Aliases​

LazyLoadWindow​

LazyLoadWindow: Window & MoliRuntime.MoliWindow & object

To solve the Intersection Observer API typescript error

Type declaration​

IntersectionObserver()​

IntersectionObserver: (callback, options?) => IntersectionObserver

Parameters​

• callback: IntersectionObserverCallback

• options?: IntersectionObserverInit

Returns​

IntersectionObserver

IntersectionObserver.prototype​

prototype: IntersectionObserver

See​

https://github.com/microsoft/TypeScript/issues/16255

Functions​

createLazyLoad()​

createLazyLoad(): IModule & LazyLoadModule

Returns​

IModule & LazyLoadModule