From 9f32e91e05801cf08f0a4b5a8ceb44fc45822281 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gina=20H=C3=A4u=C3=9Fge?= <gina@octoprint.org>
Date: Mon, 10 Apr 2017 11:54:03 +0200
Subject: [PATCH] Turned lazyload into jquery plugin, used for announcements

On call of the lazyload plugin, all matched img elements will be
checked if they have a data-src attribute. If so, their src attribute
will be replaced with the contents of the data-src attribute
(effectively loading the image) and the data-src attribute will be
removed (so that multiple calls don't call multiple processing).
---
 .../plugins/announcements/static/js/announcements.js |  8 +-------
 src/octoprint/static/js/app/main.js                  | 12 ++++++++++++
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/octoprint/plugins/announcements/static/js/announcements.js b/src/octoprint/plugins/announcements/static/js/announcements.js
index 87a899e8..2fe4dbb7 100644
--- a/src/octoprint/plugins/announcements/static/js/announcements.js
+++ b/src/octoprint/plugins/announcements/static/js/announcements.js
@@ -144,13 +144,7 @@ $(function() {
             if (!self.loginState.isAdmin()) return;
 
             // lazy load images that still need lazy-loading
-            $("#plugin_announcements_dialog_content article img").each(function (index, element) {
-                var src = element.getAttribute("data-src");
-                if (src) {
-                    element.setAttribute("src", src);
-                    element.removeAttribute("data-src");
-                }
-            });
+            $("#plugin_announcements_dialog_content article img").lazyload();
 
             self.announcementDialogContent.scrollTop(0);
 
diff --git a/src/octoprint/static/js/app/main.js b/src/octoprint/static/js/app/main.js
index 6ccb0f9f..3e2f6c70 100644
--- a/src/octoprint/static/js/app/main.js
+++ b/src/octoprint/static/js/app/main.js
@@ -444,6 +444,18 @@ $(function() {
             }
         };
 
+        $.fn.lazyload = function() {
+            return this.each(function() {
+                if (this.tagName.toLowerCase() != "img") return;
+
+                var src = this.getAttribute("data-src");
+                if (src) {
+                    this.setAttribute("src", src);
+                    this.removeAttribute("data-src");
+                }
+            });
+        };
+
         // Use bootstrap tabdrop for tabs and pills
         $('.nav-pills, .nav-tabs').tabdrop();