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>