From c4d437654b895ba0d5f7afe13277089d6c4e4cb5 Mon Sep 17 00:00:00 2001
From: Andrea Verlicchi <andrea.verlicchi@gmail.com>
Date: Fri, 27 Apr 2018 10:59:53 +0200
Subject: [PATCH] Managed loading class and loaded events in background_images
 demo

---
 demos/background_images.html | 40 +++++++++++++++++++++++++++++++++---
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/demos/background_images.html b/demos/background_images.html
index c1baa579..debb9fdb 100644
--- a/demos/background_images.html
+++ b/demos/background_images.html
@@ -146,9 +146,43 @@
 </div>
 <script src="../dist/lazyload.min.js"></script>
 <script>
-    new LazyLoad({
-		elements_selector: "a"
-	});
+	(function () {
+		function logElementEvent(eventName, element) {
+			console.log(new Date().getTime(), eventName, element.getAttribute('data-src'));
+		}
+
+		function logEvent(eventName, elementsLeft) {
+			console.log(new Date().getTime(), eventName, elementsLeft + " images left");
+		}
+
+		function createImageFragment(srcUrl) {
+			var imageFragment = document.createElement('img');
+			imageFragment.setAttribute('src', srcUrl);
+			return imageFragment;
+		}
+
+		ll = new LazyLoad({
+			elements_selector: "a",
+			callback_enter: function (element) {
+				function callback_load(event) {
+					element.classList.remove('loading');
+					logElementEvent("LOADED", element);
+					imageFragment.removeEventListener('load', callback_load);
+				}
+				var imageFragment = createImageFragment(element.getAttribute('data-src'));
+				imageFragment.addEventListener('load', callback_load);
+				element.classList.add('loading');
+				logElementEvent("ENTERED", element);
+			},
+			callback_set: function (element) {
+				logElementEvent("SET", element);
+			},
+			callback_error: function(element) {
+				logElementEvent("ERROR", element);
+				element.src = "https://placeholdit.imgix.net/~text?txtsize=21&txt=Fallback%20image&w=220&h=280";
+			}
+		});
+	}());
 </script>
 </body>
 </html>