Ads by Google

lazysizes unveilhooks extension

The unveilhooks plugin extends lazySizes to also unveil / lazyload scripts/widgets, background images, styles and video/audio elements:

<!-- Background image example: -->
<div class="lazyload" data-bg="bg-img.jpg">
	<!-- content -->

<!-- Scripts/Widgets example: -->
<div class="lazyload" data-script="module-name.js">


<!-- Styles -->
<div class="lazyload" data-link="my-style.css">


<!-- Video example: -->
<video class="lazyload" data-poster="poster.jpg" preload="none">
 	<!-- sources -->

<!-- require.js * example -->
<div class="lazyload" data-require="module-name"></div>

<!-- Styles & script combined -->
<div class="lazyload" data-script="my-script.js" data-link="my-style.css">


Note: In case you want to lazyload a background image via a class you can do so by using the addClasses option:

	.bg-stage.lazyloaded {
		background-image: url(lazyloaded-bg.jpg);

<div class="bg-stage lazyload">
	<!-- content -->

For support responsive background images see the bgset extension.

For more complex loading of styles and AMD modules please see the include extension.

Note: To support the require example you need to the requireJs option:

window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.requireJs = function(modules, cb){
	window.require(modules, cb);