Allow delayed loading of three.js (theme-next#935)

Author: 1v9

_config.yml

@@ -983,12 +983,12 @@ canvas_nest:
 
 # JavaScript 3D library.
 # Dependencies: https://github.com/theme-next/theme-next-three
-# three_waves
-three_waves: false
-# canvas_lines
-canvas_lines: false
-# canvas_sphere
-canvas_sphere: false
+three:
+  enable: false
+  delay: false # Set true to further delay loading
+  three_waves: false
+  canvas_lines: false
+  canvas_sphere: false
 
 # Canvas-ribbon
 # Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon

layout/_layout.swig

@@ -105,6 +105,7 @@
   {% include '_scripts/next-boot.swig' %}
   {% include '_scripts/scroll-cookie.swig' %}
   {% include '_scripts/exturl.swig' %}
+  {% include '_scripts/three.swig' %}
   {% include '_third-party/quicklink.swig' %}
   {% include '_third-party/comments/index.swig' %}
   {% include '_third-party/search/index.swig' %}

layout/_scripts/three.swig

@@ -0,0 +1,40 @@
+{% if theme.three.enable and theme.three.delay %}
+  {% set three_url = url_for(theme.vendors._internal + '/three/three.min.js') %}
+  {% if theme.vendors.three %}
+    {% set three_url = theme.vendors.three %}
+  {% endif %}
+
+  {% if theme.three.three_waves %}
+    {% set waves = theme.vendors.three_waves | default(url_for(theme.vendors._internal + '/three/three-waves.min.js')) %}
+  {% endif %}
+
+  {% if theme.three.canvas_lines %}
+    {% set lines = theme.vendors.canvas_lines | default(url_for(theme.vendors._internal + '/three/canvas_lines.min.js')) %}
+  {% endif %}
+
+  {% if theme.three.canvas_sphere %}
+    {% set sphere = theme.vendors.canvas_sphere | default(url_for(theme.vendors._internal + '/three/canvas_sphere.min.js')) %}
+  {% endif %}
+
+  <script>
+    ;((d, w) => {
+      loadThree = () => {
+        let s = d.createElement('script');
+        s.src = '{{ three_url }}';
+        d.body.appendChild(s);
+      }
+      let styles = ['{{ waves }}', '{{ lines }}', '{{ sphere }}'];
+      loadStyle = () => {
+        styles.forEach(x => {
+          if (x !== '') {
+            let s = d.createElement('script');
+            s.src = x;
+            d.body.appendChild(s);
+          }
+        })
+      }
+      w.addEventListener('DOMContentLoaded', loadThree);
+      w.addEventListener('load', loadStyle);
+    })(document, window);
+  </script>
+{% endif %}

layout/_scripts/vendors.swig

@@ -7,6 +7,7 @@
 </script>
 
 {% set js_vendors = {} %}
+{% set js_defer_vendors = {} %}
 {% set js_vendors.jquery = 'jquery/index.js?v=3.4.1' %}
 
 {% if theme.fastclick %}
@@ -39,19 +40,19 @@
   <script color='{{ theme.canvas_nest.color }}' opacity='{{ theme.canvas_nest.opacity }}' zIndex='{{ theme.canvas_nest.zIndex }}' count='{{ theme.canvas_nest.count }}' src="{{ canvas_nest_uri }}"></script>
 {% endif %}
 
-{% if theme.three_waves %}
-  {% set js_vendors.three = 'three/three.min.js' %}
-  {% set js_vendors.three_waves = 'three/three-waves.min.js' %}
-{% endif %}
-
-{% if theme.canvas_lines %}
-  {% set js_vendors.three = 'three/three.min.js' %}
-  {% set js_vendors.canvas_lines = 'three/canvas_lines.min.js' %}
-{% endif %}
-
-{% if theme.canvas_sphere %}
-  {% set js_vendors.three = 'three/three.min.js' %}
-  {% set js_vendors.canvas_sphere = 'three/canvas_sphere.min.js' %}
+{% if theme.three.enable and not theme.three.delay %}
+  {% if theme.three.three_waves %}
+    {% set js_defer_vendors.three = 'three/three.min.js' %}
+    {% set js_defer_vendors.three_waves = 'three/three-waves.min.js' %}
+  {% endif %}
+  {% if theme.three.canvas_lines %}
+    {% set js_defer_vendors.three = 'three/three.min.js' %}
+    {% set js_defer_vendors.canvas_lines = 'three/canvas_lines.min.js' %}
+  {% endif %}
+  {% if theme.three.canvas_sphere %}
+    {% set js_defer_vendors.three = 'three/three.min.js' %}
+    {% set js_defer_vendors.canvas_sphere = 'three/canvas_sphere.min.js' %}
+  {% endif %}
 {% endif %}
 
 {% if theme.canvas_ribbon.enable %}
@@ -70,3 +71,8 @@
   {% set internal_script = url_for(theme.vendors._internal + '/' + internal) %}
   <script src="{{ theme.vendors[name] | default(internal_script) }}"></script>
 {% endfor %}
+
+{% for name, internal in js_defer_vendors %}
+  {% set internal_script = url_for(theme.vendors._internal + '/' + internal) %}
+  <script defer src="{{ theme.vendors[name] | default(internal_script) }}"></script>
+{% endfor %}