hide loading animation when image is loaded

codeclou · Feb 16, 2017 · c16e209 · c16e209
1 parent 5a77414
commit c16e209
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 2 deletions.
diff --git a/build/cc-image-lightbox.css b/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%;

diff --git a/build/cc-image-lightbox.js b/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;
  }
  }, {

diff --git a/build/cc-image-lightbox.min.css b/build/cc-image-lightbox.min.css