1.3.0

Updated and improved.

• Added: z shortcut selector for [data-z] attribute.

1.2.3

• Added: fallback image option in compressed srcset
• Bugfix: inview callback not working when using background-image module.
• Bugfix: compressed srcset not applied.

<!-- compressed srcset -->
<img data-z='['path/img.jpg', [412, 800, 1280, 1600, 1920], '/base/path/', 'fallback-image.svg']'>

1.2.2

• Bugfix: click extension throws exception on events when using client-side .webp rewrite.
• Bugfix: polyfill src string passed to old $async.js() (now $async() for both CSS and js).

For data-attr extension:

• added data-b global base path for lazy-loaded images.
• added data-zz multi config param (accepts JSON array with configurations)
• removed: || token based multi-config

data-zz multi config and data-b (base)

<script async src="/js/z.js" data-zz='["z","zb",{
    selector: '[data-src]'
}]' data-b="/base-path/"></script>

<img data-z="relative/path.jpg">
<!-- src: /base-path/relative/path.jpg -->

1.2.1

• Added: responsive lazy-loaded background module.
• Added: shortcuts: z = [data-z], zb = [data-zb] for background images.

$lazy('z'); // default config

1.2.0

• data-l HTML attribute for configuration renamed to data-z

<script async src="dist/lazy+data-attr.js" data-z='{
   "selector": "[data-src]", 
   "observer": { 
      "threshold": [1.0],
      "trackVisibility": true,
      "delay": 100
   }
}'></script>

1.1.6

Added: option to force inview event on element using 1 as inview handler: $lazy("[selector]", 1);
Added: z event name to enable manually triggering of inview event on elements. (when using click extension)

// load all images before printing
window.onbeforeprint = function() {

	// get all applicable elements by using an empty inview handler
	var images = $lazy('[data-z]', function() {});

	// fire `z` event on images
	if (images) {
		images.forEach(function(i) {
			try {
		        var EventName = 'z';
		        if( i.fireEvent ) {
		            i.fireEvent( 'on' + EventName );     
		        } else {   
		            var evObj = document.createEvent( 'Events' );
		            evObj.initEvent( EventName, true, false );
		            i.dispatchEvent( evObj );
		        }
		    } catch (e) {

		    }
		});
	}
};

1.1.5

• Support for iPhone 5 / old browsers.

1.1.4

• data-src and data-srcset attributes removed by default inview callback for lazy loading images to allow placeholder CSS based on the img[data-src] selector.

img[data-src] {
    background-image: url(placeholder.svg);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: #f9f9f9;
    cursor: context-menu;
}

img[data-src]:hover {
    background-color:#efefef;
}

Result:

1.1.3

• Added: event handler based fallback (click, mouseover etc.)

Optional config:

{"events": ["click"]}

Also available as compressed array index 4.

The event handler based fallback enables to trigger the observer callback using an event handler when the observer fails.

This feature enables to show a user friendly placeholder using CSS and SVG.

img[data-src] {
    background-image: url(placeholder.svg);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: #f9f9f9;
    cursor: context-menu;
}

img[data-src]:hover {
    background-color:#efefef;
}

Result:

1.1.2

• Polyfill queue now returns DOM elements.