/**
 *
 * Lazy Image Loading
 *
 * @author Takuto Yanagida @ Space-Time Inc.
 * @version 2019-07-29
 *
 */


window.ST = window['ST'] || {};


(function (NS) {

	const SEL_TARGET = '.stile';
	const OFFSET     = 100;
	const BLANK_IMG  = 'data:image/gif;base64,R0lGODdhAQABAPAAAP///wAAACwAAAAAAQABAEACAkQBADs=';


	NS.addInit(2, initialize);


	// -------------------------------------------------------------------------


	function initialize() {
		const imgs      = document.querySelectorAll(SEL_TARGET + ' img');
		const imgsInTbl = document.querySelectorAll(SEL_TARGET + ' table img');

		for (let i = 0; i < imgs.length; i += 1) {
			const img = imgs[i];
			if ([].indexOf.call(imgsInTbl, img) !== -1) continue;
			hide(img);
		}
		NS.onIntersect(onIntersect, true, { targets: imgs, marginBottom: OFFSET, threshold: 0 });
		function onIntersect(vs) {
			for (let i = 0; i < imgs.length; i += 1) {
				const img = imgs[i];
				if (!img.dataset.src) continue;
				if (vs[i]) show(img);
			}
		}

		NS.onBeforePrint(onPrint);
		function onPrint() {
			for (let i = 0; i < imgs.length; i += 1) {
				const img = imgs[i];
				if (!img.dataset.src) continue;
				show(img, true);
			}
		}
	}

	function hide(img) {
		saveSrc(img);
		img.style.opacity = 0;
		const h = img.getAttribute('height');
		if (h) img.style.minHeight = h + 'px';
	}

	function show(img, immediately = false) {
		if (immediately) {
			img.style.minHeight = '';
			img.style.opacity   = '';
		} else {
			img.addEventListener('load', () => {
				img.style.minHeight = '';
				img.style.opacity   = '';
			});
		}
		restoreSrc(img);
	}

	function saveSrc(img) {
		img.dataset['src'] = img.src;
		img.src = BLANK_IMG;
		if (img.srcset) {
			img.dataset['srcset'] = img.srcset;
			img.srcset = '';
		}
	}

	function restoreSrc(img) {
		if (img.dataset.srcset) {
			img.srcset = img.dataset.srcset;
			img.dataset.srcset = '';
		}
		img.src = img.dataset.src;
		img.dataset.src = '';
	}

})(window.ST);

@@ -88,16 +88,16 @@
 n 20
-19
+22
 -07-
-29
+07
 %0A *%0A
@@ -581,16 +581,116 @@
 e img');
+%0A%09%09const imgsSkip  = document.querySelectorAll(SEL_TARGET + ' %5Bdata-stile~=%22no-lazy-loading%22%5D img');
 %0A%0A%09%09for 
@@ -809,16 +809,72 @@
 ntinue;%0A
+%09%09%09if (%5B%5D.indexOf.call(imgsSkip, img) !== -1) continue;%0A
 %09%09%09hide(

Add optional feature to lazy image loading