hide loading animation when image is loaded

Author: Bernhard Grünewaldt

build/cc-image-lightbox.css

@@ -70,6 +70,9 @@
     background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCA0NCA0NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiNmZmYiPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgIDxjaXJjbGUgY3g9IjIyIiBjeT0iMjIiIHI9IjEiPgogICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBiZWdpbj0iMHMiIGR1cj0iMS44cyIgdmFsdWVzPSIxOyAyMCIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgYmVnaW49IjBzIiBkdXI9IjEuOHMiIHZhbHVlcz0iMTsgMCIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiIGtleVNwbGluZXM9IjAuMywgMC42MSwgMC4zNTUsIDEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgPGNpcmNsZSBjeD0iMjIiIGN5PSIyMiIgcj0iMSI+CiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIGJlZ2luPSItMC45cyIgZHVyPSIxLjhzIiB2YWx1ZXM9IjE7IDIwIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIga2V5U3BsaW5lcz0iMC4xNjUsIDAuODQsIDAuNDQsIDEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1vcGFjaXR5IiBiZWdpbj0iLTAuOXMiIGR1cj0iMS44cyIgdmFsdWVzPSIxOyAwIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIga2V5U3BsaW5lcz0iMC4zLCAwLjYxLCAwLjM1NSwgMSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICAgICAgICA8L2NpcmNsZT4KICAgIDwvZz4KPC9zdmc+) center center no-repeat;
     background-size:4rem;
 }
+.cc-lightbox--image-loaded {
+    background: transparent;
+}
 .cc-lightbox--image-inner {
     height:100%;
     width: 100%;

build/cc-image-lightbox.js

@@ -154,6 +154,11 @@ var CCImageLightbox = function () {
             }
             return button;
         }
+    }, {
+        key: '_generateId',
+        value: function _generateId(galleryId, index) {
+            return 'cc-lightbox--' + galleryId + '--' + index;
+        }
     }, {
         key: 'closeIfOpen',
         value: function closeIfOpen() {
@@ -216,12 +221,17 @@ var CCImageLightbox = function () {
             imageInnerWrap.setAttribute('class', 'cc-lightbox--image-inner-wrap');
             imageInner.appendChild(imageInnerWrap);
             var img = document.createElement('img');
+            img.onload = function () {
+                image.setAttribute('class', 'cc-lightbox--image cc-lightbox--image-loaded');
+            };
             img.setAttribute('src', self._getImage(galleryId, index).src);
             img.setAttribute('class', 'cc-lightbox--image-img');
+            img.setAttribute('id', self._generateId(galleryId, index));
             imageInnerWrap.appendChild(img);
 
             // NEXT BUTTON
             wrapper.appendChild(self._renderNextOrPreviousButton(galleryId, indexInt + 1, 'right'));
+
             return false;
         }
     }, {