Merge branch 'feature/backgroundImagesEvents' into development

verlok · Apr 27, 2018 · 8d56fdf · 8d56fdf
2 parents 9c5cb94 + c4d4376
commit 8d56fdf
Showing 1 changed file with 37 additions and 3 deletions.
diff --git 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>