⚡ Use lazy loading image function & add image viewer. Close #65

assets/js/next-boot.js

@@ -17,6 +17,7 @@
 
 NexT.boot.registerEvents = function() {
 
+  NexT.utils.registerImageLoadEvent();
   NexT.utils.registerScrollPercent();
   // NexT.utils.registerCanIUseTag();
   NexT.utils.registerToolButtons();
@@ -63,6 +64,7 @@ NexT.boot.refresh = function() {
   } else {
     NexT.utils.hideCommontes();
   }
+  NexT.utils.registerImageViewer();
 
   //TODO
    /**

assets/js/utils.js

@@ -7,6 +7,37 @@ HTMLElement.prototype.wrap = function (wrapper) {
 };
 
 NexT.utils = {
+  registerImageLoadEvent: function() {
+    var images = document.querySelectorAll('.sidebar img, .post-block img, .vendors-list img');
+			
+    var callback = (entries) => {
+      entries.forEach(item => {
+        if (item.intersectionRatio > 0) {
+          var ele = item.target;
+          var imgSrc = ele.getAttribute('data-src');
+          if (imgSrc) {
+            var img = new Image();
+            img.addEventListener('load', function() {
+              ele.src = imgSrc;
+            }, false);
+            ele.src = imgSrc;
+            // Prevent load image again
+            ele.removeAttribute('data-src');
+          }
+        }
+      })
+    };
+      
+    var observer = new IntersectionObserver(callback);
+    images.forEach(img => {
+      observer.observe(img);
+    });
+  },
+
+  registerImageViewer: function() {
+    new Viewer(document.querySelector('.post-body'),{ navbar:2, toolbar:2 });
+  },
+
   registerToolButtons: function () {
     const buttons = document.querySelector('.tool-buttons');