Asset Reveal

Provides multiple methods to lazyload content triggered by events.


el The element to apply the event listeners to.


The following example demonstrates the different lazy loading strategies.

require([ "jquery", "lib/utils/asset_reveal" ], function($, AssetReveal) {

  var assetReveal = new AssetReveal({
    el: '#container'

  $("button[data-event]").on("click", function() {
    var this = $(this);
<div id="container">
  <div data-uncomment>
    <!-- <img src="..." alt="..." /> -->
  <div data-script>
  <div class="rwd-image-blocker" style="background-image: url(...);"></div>
  <img data-src="..." data-alt="..." />

<button type="button" data-event=":asset/uncomment">Uncomment image</button>
<button type="button" data-event=":asset/uncommentScript">Uncomment script</button>
<button type="button" data-event=":asset/loadBgImage">Load background image</button>
<button type="button" data-event=":asset/loadDataSrc">Load image placeholder</button>