⚡ Make the google translate script lazy load.

assets/js/third-party/others/google-translate.js

@@ -1,173 +0,0 @@
-(function () {
-    var gtConstEvalStartTime = new Date();
-    var h = this || self,
-        l = /^[\w+/_-]+[=]{0,2}$/,
-        m = null;
-    function n(a) {
-        return (a = a.querySelector && a.querySelector("script[nonce]")) && (a = a.nonce || a.getAttribute("nonce")) &&
-            l.test(a) ? a : ""
-    }
-    function p(a, b) {
-        function c() {}
-        c.prototype = b.prototype;
-        a.i = b.prototype;
-        a.prototype = new c;
-        a.prototype.constructor = a;
-        a.h = function (g, f, k) {
-            for (var e = Array(arguments.length - 2), d = 2; d < arguments.length; d++) e[d - 2] = arguments[d];
-            return b.prototype[f].apply(g, e)
-        }
-    }
-    function q(a) {
-        return a
-    };
-    function r(a) {
-        if (Error.captureStackTrace) Error.captureStackTrace(this, r);
-        else {
-            var b = Error().stack;
-            b && (this.stack = b)
-        }
-        a && (this.message = String(a))
-    }
-    p(r, Error);
-    r.prototype.name = "CustomError";
-    function u(a, b) {
-        a = a.split("%s");
-        for (var c = "", g = a.length - 1, f = 0; f < g; f++) c += a[f] + (f < b.length ? b[f] : "%s");
-        r.call(this, c + a[g])
-    }
-    p(u, r);
-    u.prototype.name = "AssertionError";
-    function v(a, b) {
-        throw new u("Failure" + (a ? ": " + a : ""), Array.prototype.slice.call(arguments, 1));
-    };
-    var w;
-    function x(a, b) {
-        this.g = b === y ? a : ""
-    }
-    x.prototype.toString = function () {
-        return this.g + ""
-    };
-    var y = {};
-    function z(a) {
-        var b = document.getElementsByTagName("head")[0];
-        b || (b = document.body.parentNode.appendChild(document.createElement("head")));
-        b.appendChild(a)
-    }
-    function _loadJs(a) {
-        var b = document;
-        var c = "SCRIPT";
-        "application/xhtml+xml" === b.contentType && (c = c.toLowerCase());
-        c = b.createElement(c);
-        c.type = "text/javascript";
-        c.charset = "UTF-8";
-        if (void 0 === w) {
-            b = null;
-            var g = h.trustedTypes;
-            if (g && g.createPolicy) {
-                try {
-                    b = g.createPolicy("goog#html", {
-                        createHTML: q,
-                        createScript: q,
-                        createScriptURL: q
-                    })
-                } catch (t) {
-                    h.console && h.console.error(t.message)
-                }
-                w = b
-            } else w = b
-        }
-        a = (b = w) ? b.createScriptURL(a) : a;
-        a = new x(a, y);
-        a: {
-            try {
-                var f = c && c.ownerDocument,
-                    k = f && (f.defaultView || f.parentWindow);
-                k = k || h;
-                if (k.Element && k.Location) {
-                    var e = k;
-                    break a
-                }
-            } catch (t) {}
-            e = null
-        }
-        if (e && "undefined" != typeof e.HTMLScriptElement && (!c || !(c instanceof e.HTMLScriptElement) && (c instanceof e
-                .Location || c instanceof e.Element))) {
-            e = typeof c;
-            if ("object" == e && null != c || "function" == e) try {
-                var d = c.constructor.displayName || c.constructor.name || Object.prototype.toString.call(c)
-            } catch (t) {
-                d = "<object could not be stringified>"
-            } else d = void 0 === c ? "undefined" : null === c ? "null" : typeof c;
-            v("Argument is not a %s (or a non-Element, non-Location mock); got: %s",
-                "HTMLScriptElement", d)
-        }
-        a instanceof x && a.constructor === x ? d = a.g : (d = typeof a, v(
-            "expected object of type TrustedResourceUrl, got '" + a + "' of type " + ("object" != d ? d : a ?
-                Array.isArray(a) ? "array" : d : "null")), d = "type_error:TrustedResourceUrl");
-        c.src = d;
-        (d = c.ownerDocument && c.ownerDocument.defaultView) && d != h ? d = n(d.document) : (null === m && (m = n(
-            h.document)), d = m);
-        d && c.setAttribute("nonce", d);
-        z(c)
-    }
-    function _loadCss(a) {
-        var b = document.createElement("link");
-        b.type = "text/css";
-        b.rel = "stylesheet";
-        b.charset = "UTF-8";
-        b.href = a;
-        z(b)
-    }
-    function _isNS(a) {
-        a = a.split(".");
-        for (var b = window, c = 0; c < a.length; ++c)
-            if (!(b = b[a[c]])) return !1;
-        return !0
-    }
-    function _setupNS(a) {
-        a = a.split(".");
-        for (var b = window, c = 0; c < a.length; ++c) b.hasOwnProperty ? b.hasOwnProperty(a[c]) ? b = b[a[c]] : b =
-            b[a[c]] = {} : b = b[a[c]] || (b[a[c]] = {});
-        return b
-    }
-    window.addEventListener && "undefined" == typeof document.readyState && window.addEventListener(
-        "DOMContentLoaded",
-        function () {
-            document.readyState = "complete"
-        }, !1);
-    if (_isNS('google.translate.Element')) {
-        return
-    }(function () {
-        var c = _setupNS('google.translate._const');
-        c._cest = gtConstEvalStartTime;
-        gtConstEvalStartTime = undefined;
-        c._cl = navigator.language || navigator.userLanguage;
-        c._cuc = 'googleTranslateElementInit';
-        c._cac = '';
-        c._cam = '';
-        c._ctkk = '449649.3822363247';
-        var h = 'translate.googleapis.com';
-        var s = (true ? 'https' : window.location.protocol == 'https:' ? 'https' : 'http') + '://';
-        var b = s + h;
-        c._pah = h;
-        c._pas = s;
-        // c._pbi = b + '/translate_static/img/te_bk.gif';
-        c._pbi = '';
-        c._pci = b + '/translate_static/img/te_ctrl3.gif';
-        c._pli = b + '/translate_static/img/loading.gif';
-        c._plla = h + '/translate_a/l';
-        c._pmi = b + '/translate_static/img/mini_google.png';
-        c._ps = window.translateelement_styles;
-        c._puh = 'translate.google.cn';
-        _loadCss(c._ps);
-        _loadJs(b + `/translate_static/js/element/main_${navigator.language || navigator.userLanguage}.js`);
-    })();
-})();
-
-function googleTranslateElementInit(){
-  new google.translate.TranslateElement({
-    includedLanguages: 'zh-CN,zh-TW,en,ru',
-    autoDisplay:false
-  },'google_translate_element');
-}

assets/js/utils.js

@@ -592,6 +592,27 @@ NexT.utils = {
     });
   },
 
+  lazyLoadComponent: function(selector, legacyCallback) {
+    if (legacyCallback) {
+      return this.loadComments(selector).then(legacyCallback);
+    }
+    return new Promise(resolve => {
+      const element = document.querySelector(selector);
+      if (!element) {
+        resolve();
+        return;
+      }
+      const intersectionObserver = new IntersectionObserver((entries, observer) => {
+        const entry = entries[0];
+        if (!entry.isIntersecting) return;
+
+        resolve();
+        observer.disconnect();
+      });
+      intersectionObserver.observe(element);
+    });
+  },
+
   loadComments: function (selector, legacyCallback) {
     if (legacyCallback) {
       return this.loadComments(selector).then(legacyCallback);

layouts/partials/scripts.html

@@ -8,8 +8,15 @@
   {{ partialCached "_thirdparty/others/mermaid.html" . }}
 {{ end }}
 
-
+{{ if .Site.Params.footer.translate }}
-
+<script type="text/javascript">
-
+  document.addEventListener('DOMContentLoaded', () => {
-
+    const element = '#gtranslate';
-
+    if (!NexT.utils.checkDOMExist(element)) return;
+    NexT.utils.lazyLoadComponent(element).then(() => { 
+      window.translateelement_styles='/css/google-translate.min.css'; 
+      NexT.utils.getScript('/js/third-party/google-translate.min.js');
+    });
+  });
+</script>
+{{ end }}

layouts/partials/scripts/global.html

@@ -61,16 +61,7 @@
 {{- $search := resources.Get "js/third-party/search/algolia.js" }}
 {{- $nextjs = $nextjs | append $search }}
 {{ end }}
-{{ if .Site.Params.footer.translate }}
-{{- $gt := resources.Get "js/third-party/others/google-translate.js" }}
-{{- $nextjs = $nextjs | append $gt }}  
 
-{{ $gtCss := resources.Get "css/gt.scss" }}
-{{ $style := $gtCss | resources.ToCSS | minify }}
-<script type="text/javascript">
-  window.translateelement_styles = "{{- $style.RelPermalink -}}";
-</script>
-{{ end }}
 {{- $nextjs = $nextjs | resources.Concat "js/main.js"}}
 {{ if hugo.IsProduction }}
 {{- $nextjs = $nextjs | minify | fingerprint }}

static/js/third-party/google-translate.min.js

@@ -0,0 +1 @@
+(function(){var gtConstEvalStartTime=new Date();var h=this||self,l=/^[\w+/_-]+[=]{0,2}$/,m=null;function n(a){return(a=a.querySelector&&a.querySelector("script[nonce]"))&&(a=a.nonce||a.getAttribute("nonce"))&&l.test(a)?a:""}function p(a,b){function c(){}c.prototype=b.prototype;a.i=b.prototype;a.prototype=new c;a.prototype.constructor=a;a.h=function(g,f,k){for(var e=Array(arguments.length-2),d=2;d<arguments.length;d++)e[d-2]=arguments[d];return b.prototype[f].apply(g,e)}}function q(a){return a};function r(a){if(Error.captureStackTrace)Error.captureStackTrace(this,r);else{var b=Error().stack;b&&(this.stack=b)}a&&(this.message=String(a))}p(r,Error);r.prototype.name="CustomError";function u(a,b){a=a.split("%s");for(var c="",g=a.length-1,f=0;f<g;f++)c+=a[f]+(f<b.length?b[f]:"%s");r.call(this,c+a[g])}p(u,r);u.prototype.name="AssertionError";function v(a,b){throw new u("Failure"+(a?": "+a:""),Array.prototype.slice.call(arguments,1));};var w;function x(a,b){this.g=b===y?a:""}x.prototype.toString=function(){return this.g+""};var y={};function z(a){var b=document.getElementsByTagName("head")[0];b||(b=document.body.parentNode.appendChild(document.createElement("head")));b.appendChild(a)}function _loadJs(a){var b=document;var c="SCRIPT";"application/xhtml+xml"===b.contentType&&(c=c.toLowerCase());c=b.createElement(c);c.type="text/javascript";c.charset="UTF-8";if(void 0===w){b=null;var g=h.trustedTypes;if(g&&g.createPolicy){try{b=g.createPolicy("goog#html",{createHTML:q,createScript:q,createScriptURL:q})}catch(t){h.console&&h.console.error(t.message)}w=b}else w=b}a=(b=w)?b.createScriptURL(a):a;a=new x(a,y);a:{try{var f=c&&c.ownerDocument,k=f&&(f.defaultView||f.parentWindow);k=k||h;if(k.Element&&k.Location){var e=k;break a}}catch(t){}e=null}if(e&&"undefined"!=typeof e.HTMLScriptElement&&(!c||!(c instanceof e.HTMLScriptElement)&&(c instanceof e.Location||c instanceof e.Element))){e=typeof c;if("object"==e&&null!=c||"function"==e)try{var d=c.constructor.displayName||c.constructor.name||Object.prototype.toString.call(c)}catch(t){d="<object could not be stringified>"}else d=void 0===c?"undefined":null===c?"null":typeof c;v("Argument is not a %s (or a non-Element, non-Location mock); got: %s","HTMLScriptElement",d)}a instanceof x&&a.constructor===x?d=a.g:(d=typeof a,v("expected object of type TrustedResourceUrl, got '"+a+"' of type "+("object"!=d?d:a?Array.isArray(a)?"array":d:"null")),d="type_error:TrustedResourceUrl");c.src=d;(d=c.ownerDocument&&c.ownerDocument.defaultView)&&d!=h?d=n(d.document):(null===m&&(m=n(h.document)),d=m);d&&c.setAttribute("nonce",d);z(c)}function _loadCss(a){var b=document.createElement("link");b.type="text/css";b.rel="stylesheet";b.charset="UTF-8";b.href=a;z(b)}function _isNS(a){a=a.split(".");for(var b=window,c=0;c<a.length;++c)if(!(b=b[a[c]]))return!1;return!0}function _setupNS(a){a=a.split(".");for(var b=window,c=0;c<a.length;++c)b.hasOwnProperty?b.hasOwnProperty(a[c])?b=b[a[c]]:b=b[a[c]]={}:b=b[a[c]]||(b[a[c]]={});return b}window.addEventListener&&"undefined"==typeof document.readyState&&window.addEventListener("DOMContentLoaded",function(){document.readyState="complete"},!1);if(_isNS('google.translate.Element')){return}(function(){var c=_setupNS('google.translate._const');c._cest=gtConstEvalStartTime;gtConstEvalStartTime=undefined;c._cl=navigator.language||navigator.userLanguage;c._cuc='googleTranslateElementInit';c._cac='';c._cam='';c._ctkk='449649.3822363247';var h='translate.googleapis.com';var s=(true?'https':window.location.protocol=='https:'?'https':'http')+'://';var b=s+h;c._pah=h;c._pas=s;c._pbi='';c._pci=b+'/translate_static/img/te_ctrl3.gif';c._pli=b+'/translate_static/img/loading.gif';c._plla=h+'/translate_a/l';c._pmi=b+'/translate_static/img/mini_google.png';c._ps=window.translateelement_styles;c._puh='translate.google.cn';_loadCss(c._ps);_loadJs(b+`/translate_static/js/element/main_${navigator.language||navigator.userLanguage}.js`)})()})();function googleTranslateElementInit(){new google.translate.TranslateElement({includedLanguages:'zh-CN,zh-TW,en,ru',autoDisplay:false},'google_translate_element')}