Move lazyIconScript to standard JavaScript

**NOTE**
Since *jquery*s latest release has many breaking changes normalizing to standard ES5 but a bit of CSS3 transitions.

Applies to OpenUserJS#904 ... post trial change for *jquery* incompatibilities.

Author: Martii

public/css/common.css

@@ -352,3 +352,20 @@ ul.flaggedList {
   border-radius: 0 3px 3px 0;
   text-shadow: 0 1px #045481;
 }
+
+
+.translucent-icon {
+  opacity: 0;
+}
+
+.hide-icon {
+  display: none;
+}
+
+.opaque-icon {
+  opacity: 1;
+}
+
+.fade-icon {
+  transition: opacity 0.33s ease-in-out;
+}

views/includes/scripts/lazyIconScript.html

@@ -1,27 +1,64 @@
 <script type="text/javascript">
   (function () {
+    'use strict';
 
-    $(window).load(function () {
-      window.setTimeout(function () {
-        $('[data-icon-src]').each(function () {
-          var container = $(this);
-          var size = container.data('icon-size');
-          var img = new Image();
-
-          if (size) {
-            img.width = size;
-            img.height = size;
-          }
-
-          $(img).load(function () {
-            var that = $(this).hide();
-
-            container.empty().append(that);
-            that.fadeIn();
-          }).attr('src', container.data('icon-src'));
-        });
-      }, 13);
-    });
+    function onShow(aImg) {
+      aImg.classList.remove('translucent-icon');
+      aImg.classList.add('opaque-icon');
+    }
+
+    function onError(aEv) {
+      var img = aEv.target;
+      var container = img.parentNode;
+
+      container.removeChild(img);
+    }
+
+    function onLoad(aEv) {
+      var img = aEv.target;
+      var container = img.parentNode;
+
+      var node = container.querySelector('i');
+
+      container.removeChild(node);
+      img.classList.remove('hide-icon');
+
+      setTimeout(onShow, 250, img);
+    }
+
+    function onTimeout() {
+      var nodes = document.querySelectorAll('[data-icon-src]');
+      var i = null;
+      var container = null;
+      var dataIconSrc = null;
+      var node = null;
+      var img = null;
+
+      for (i = 0; container = nodes[i]; i++) {
+        dataIconSrc = container.getAttribute('data-icon-src');
+
+        node = container.querySelector('i');
+
+        img = new Image();
+
+        img.addEventListener('load', onLoad);
+        img.addEventListener('error', onError);
+
+        img.classList.add('hide-icon');
+        img.classList.add('fade-icon');
+        img.classList.add('translucent-icon');
+
+        img.src = dataIconSrc;
+
+        container.appendChild(img);
+      }
+    }
+
+    function onDOMContentLoaded(aEv) {
+      window.setTimeout(onTimeout, 13);
+    }
+
+    document.addEventListener('DOMContentLoaded', onDOMContentLoaded);
 
   })();
 </script>