From 8058c48a38452f754154d6a8f6b827d112f4b054 Mon Sep 17 00:00:00 2001
From: jcorporation <mail@jcgames.de>
Date: Wed, 10 Oct 2018 23:01:21 +0100
Subject: [PATCH] Fix: optimize lazy loading of coverimages

---
 htdocs/css/mympd.css | 1 +
 htdocs/js/mympd.js   | 9 +++------
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/htdocs/css/mympd.css b/htdocs/css/mympd.css
index 174d588..0daa272 100644
--- a/htdocs/css/mympd.css
+++ b/htdocs/css/mympd.css
@@ -61,6 +61,7 @@ small {
 
 .album-cover {
   background-size: cover;
+  background-image: url("/assets/coverimage-loading.png");
   border: 1px solid black;
   border-radius: 5px;
   overflow: hidden;
diff --git a/htdocs/js/mympd.js b/htdocs/js/mympd.js
index 035bf1a..0d58d73 100644
--- a/htdocs/js/mympd.js
+++ b/htdocs/js/mympd.js
@@ -1319,7 +1319,6 @@ function parseListDBtags(obj) {
             card.classList.add('mr-0');
             card.setAttribute('id', id);
             card.setAttribute('data-album', encodeURI(obj.data[i].value));
-            card.setAttribute('data-init', 'false');
             card.innerHTML = '<div class="card mb-4" id="card' + id + '">' +
                              ' <a href="#" class="card-img-top"></a>' +
                              ' <div class="card-body">' +
@@ -1399,11 +1398,9 @@ function createListTitleObserver(ele) {
 function getListTitles(changes, observer) {
     changes.forEach(change => {
         if (change.intersectionRatio > 0) {
-            if (change.target.getAttribute('data-init') == 'false') {
-                change.target.setAttribute('data-init', 'true');
-                var album = decodeURI(change.target.getAttribute('data-album'));
-                sendAPI({"cmd": "MPD_API_DATABASE_TAG_ALBUM_TITLE_LIST", "data": { "album": album, "search": app.current.search, "tag": app.current.view}}, parseListTitles);
-            }
+            observer.unobserve(change.target);
+            var album = decodeURI(change.target.getAttribute('data-album'));
+            sendAPI({"cmd": "MPD_API_DATABASE_TAG_ALBUM_TITLE_LIST", "data": { "album": album, "search": app.current.search, "tag": app.current.view}}, parseListTitles);
         }
     });
 }