{lazy:url:placeholder:mode}

Description

Defers loading a chunk of page content until it is needed. It outputs a placeholder div and a small piece of JavaScript; the browser fetches the target url by AJAX and drops the response into the div. By default the fetch waits until the placeholder scrolls near the viewport (an IntersectionObserver with a 200px bottom margin), so heavy or rarely-seen views do not slow the first paint. The url is requested with method POST and the X-Requested-With header, the same way an ajax view call is made. An empty url produces no output. The mode parameter switches between the lazy default, now (fetch as soon as the page loads, no observer), and nolazy (load the content inline on the server at render time, with no JavaScript). Typical use is a relative url to a view, for example a comments list or a related-items block on an article page.

Parameters

url required default (none - required)

The address fetched by AJAX (or, in nolazy mode, fetched on the server) and rendered inside the placeholder div. Usually a relative url to an AA view, for example view.php?vid=22. URL_PARAMETERS in the url is replaced with the current query string. An empty url produces no output at all.

placeholder optional default [*] (a loading spinner)

HTML shown in the div before the real content arrives. The token [*] is replaced with a small spinner image (loader.gif). Keep it lightweight - it is what the visitor sees until the fetch completes.

mode optional default (empty - lazy on scroll)

When to fetch. Empty (the default) waits with an IntersectionObserver until the placeholder nears the viewport. now starts the AJAX fetch immediately on page load. nolazy drops the JavaScript entirely and fetches the content inline on the server while the page is built.

Examples

test[{lazy:}]
Expected[]
Actual[]
virtual{lazy:view.php?vid=22}
Expected(a div with a spinner placeholder; the browser fetches view.php?vid=22 by AJAX once the div nears the viewport)
Actual
loading
virtual{lazy:view.php?vid=22:Loading comments...}
Expected(the div shows Loading comments... until the AJAX fetch of view.php?vid=22 replaces it)
Actual
Loading comments...
virtual{lazy:view.php?vid=22::now}
Expected(same div, but the AJAX fetch starts at page load instead of waiting for a scroll)
Actual
loading
virtual{lazy:view.php?vid=999999::nolazy}
Expected(no JavaScript; the url is fetched on the server during rendering and its result is placed in the div inline)
Actual
ActionApps – Collaborative Web Publishing
← All expressions