Asset Reveal

Provides multiple methods to lazyload content triggered by events.

Arguments

el The element to apply the event listeners to.

Usage

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);
    $this.trigger($this.data('event'));
  });
});
<div id="container">
  <div data-uncomment>
    <!-- <img src="..." alt="..." /> -->
  </div>
  <div data-script>
    <!--
      <script>
        alert('Uncommented')
      </script>
    -->
  </div>
  <div class="rwd-image-blocker" style="background-image: url(...);"></div>
  <img data-src="..." data-alt="..." />
</div>

<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>