How to lazy load content

Lazy loading is a way of postponing loading of content until it is likely that it will be viewable. This can improve the load time of a webpage and the general performance since it evens out the resource usage. It can also significantly improve the viewability of ads.

In this example we also demonstrate the optional lazyDistance setting, which controls at what distance in pixels from the viewport the container will load.

adk.config()
    .addContainer('my-container', adk.container.config()
        .provider('adk.hello')
        .lazy()
        .lazyDistance(100))
    .apply()
    .init(publisherId)

The container will request content from the provider when the user scrolls towards it or when it is in the viewport.

Note. Loading is not triggered if the window is not focused. This is because ADK does not consider the user to be active when the window is not focused or the tab is not visible. If you are using dev tools in the browser, you may sometimes need to click somewhere on the page to focus.