feat: add imagesLoad util

P1R · Dec 1, 2018 · cdf5560 · cdf5560
1 parent 7fb22d5
commit cdf5560
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 7 deletions.
diff --git a/_includes/scripts/components/lightbox.js b/_includes/scripts/components/lightbox.js
@@ -1,7 +1,7 @@
 (function () {
   var SOURCES = window.TEXT_VARIABLES.sources;
   window.Lazyload.js(SOURCES.jquery, function() {
-    window.pageLoad.then(function() {
+    window.imagesLoad.then(function() {
       /* global Gallery */
       var $pageGalleryModal = $('.js-page-gallery-modal');
       var pageGalleryModal = $pageGalleryModal.modal({ onChange: handleModalChange });

diff --git a/_includes/scripts/utils/imagesLoad.js b/_includes/scripts/utils/imagesLoad.js
@@ -0,0 +1,26 @@
+(function() {
+  var images = document.getElementsByTagName('img'), image;
+  var imagesCount = images.length, loadedCount = 0;
+  var i, j, loaded = false, cbs = [];
+  imagesCount < 1 && (loaded = true);
+  for (i = 0; i < imagesCount; i++) {
+    image = images[i];
+    image.complete ? handleImageLoad() : image.addEventListener('load', handleImageLoad);
+  }
+  function handleImageLoad() {
+    loadedCount++;
+    if (loadedCount === imagesCount) {
+      loaded = true;
+      if (cbs.length > 0) {
+        for (j = 0; j < cbs.length; j++) {
+          cbs[j]();
+        }
+      }
+    }
+  }
+  window.imagesLoad = {
+    then: function(cb) {
+      cb && (loaded ? cb() : (cbs.push(cb)));
+    }
+  };
+})();
diff --git a/_includes/scripts/utils.js → _includes/scripts/utils/utils.js b/_includes/scripts/utils.js → _includes/scripts/utils/utils.js
@@ -22,10 +22,11 @@
   window.pageLoad = (function () {
     var loaded = false, cbs = [];
     window.addEventListener('load', function () {
-      var i, cb; loaded = true;
+      var i;
+      loaded = true;
       if (cbs.length > 0) {
         for (i = 0; i < cbs.length; i++) {
-          cb = cbs[i]; cb();
+          cbs[i]();
         }
       }
     });

diff --git a/_layouts/base.html b/_layouts/base.html
@@ -8,7 +8,7 @@
     {%- include analytics.html -%}
     {%- include head.html -%}
     <script>
-      {%- include scripts/utils.js -%}
+      {%- include scripts/utils/utils.js -%}
       {%- include scripts/lib/throttle.js -%}
       {%- include scripts/lib/lazyload.js -%}
     </script>
@@ -18,6 +18,9 @@
     <div class="root" data-is-touch="false">
       {{ content }}
     </div>
-    <script>{%- include scripts/common.js -%}</script>
+    <script>
+      {%- include scripts/utils/imagesLoad.js -%}
+      {%- include scripts/common.js -%}
+    </script>
   </body>
 </html>
diff --git a/docs/_layouts/base.html b/docs/_layouts/base.html
@@ -8,7 +8,7 @@
     {%- include analytics.html -%}
     {%- include head.html -%}
     <script>
-      {%- include scripts/utils.js -%}
+      {%- include scripts/utils/utils.js -%}
       {%- include scripts/lib/throttle.js -%}
       {%- include scripts/lib/lazyload.js -%}
     </script>
@@ -26,6 +26,9 @@
     <div class="root" data-is-touch="false">
       {{ content }}
     </div>
-    <script>{%- include scripts/common.js -%}</script>
+    <script>
+      {%- include scripts/utils/imagesLoad.js -%}
+      {%- include scripts/common.js -%}
+    </script>
   </body>
 </html>