Asset Reveal

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>