demos/delay_test.html

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8" />
		<title>
			Lazyload tests
		</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<style>
			html {
				box-sizing: border-box;
			}

			* {
				box-sizing: inherit;
			}

			ul,
			li {
				list-style-type: none;
				margin: 0;
				padding: 0;
			}

			a,
			img {
				display: block;
			}

			img {
				border: 1px solid black;
				width: 220px;
				height: 280px;
			}

			img:not([src]) {
				visibility: hidden;
			}

			.space {
				background-color: burlywood;
				text-align: center;
				padding: 60vh 0;
			}

			/* Fixes Firefox anomaly during image load */

			@-moz-document url-prefix() {
				img:-moz-loading {
					visibility: hidden;
				}
			}
		</style>
	</head>

	<body>
		<div class="space">
			Here's some space
		</div>
		<div>
			<a href="#/it/donna/stivaletti_cod44721746jj.html">
				<img
					alt="Stivaletti"
					class="lazy"
					data-src="https://via.placeholder.com/440x560?text=Booya!"
					width="220"
					height="280"
				/>
			</a>
		</div>
		<div class="space">
			Here's some space
		</div>
		<script src="../dist/lazyload.js"></script>
		<script>
			(function() {
				function logElementEvent(eventName, element) {
					console.log(
						Date.now(),
						eventName,
						element.getAttribute("data-src")
					);
				}

				var callback_enter = function(element) {
					logElementEvent("🔑 ENTERED", element);
				};
				var callback_exit = function(element) {
					logElementEvent("🚪 EXITED", element);
				};
				var callback_reveal = function(element) {
					logElementEvent("👁️ REVEALED", element);
				};
				var callback_loaded = function(element) {
					logElementEvent("👍 LOADED", element);
				};
				var callback_error = function(element) {
					logElementEvent("💀 ERROR", element);
					element.src =
						"https://via.placeholder.com/440x560/?text=Error+Placeholder";
				};
				var callback_finish = function() {
					logElementEvent("✔️ FINISHED", document.documentElement);
				};

				ll = new LazyLoad({
					elements_selector: ".lazy",
					load_delay: 1000,
					threshold: 0,
					// Assign the callbacks defined above
					callback_enter: callback_enter,
					callback_exit: callback_exit,
					callback_reveal: callback_reveal,
					callback_loaded: callback_loaded,
					callback_error: callback_error,
					callback_finish: callback_finish
				});
			})();
		</script>
	</body>
</html>