The AJAX controller lazy loads content asynchronously.

Use this For loading content that is only needed at larger geometry breakpoint to reduce page weight on smaller devices or for personalized content. We frequntly use this for sidebar upsell or promotional information that is unrelated to the content of the page and would pollute the search engine's characterization of the page. This is also a great way to lazy load interactive elements, widgets and web apps.

  1. The contents of the element below was loaded by VIA ajax. The parameter data-src="/examples/chunk.html" specifies the url to download the content from and data-inline="true" specifies that the loaded content should be displayed in the element.
  2. The content below is only loaded when the geometry breakpoint is small or tiny The parameter data-enables-scales="tiny,small" specifies which breakpoints should load content. (shrink the window to see it load)

    Scroll down to see lazy loaded offscreen ajax behavior.

  3. This json feed will only load when the element becomes visible.

The AJAX controller emits the following event

  • data: The controller has loaded the data.
  1. Define a controller to handle the data
  2. markup

    data-inline="false" tells AJAX that some other controller will handle the data. Notice that data-jsclass has 2 classes data-jsclass="ajaxTest,digitopiaAjax". ajaxTest listens for the data event from the the AJAX controller and loads and outputs the images in the element.

  3. Working example