如何在OpenCart中推遲或異步javascript

Question

我有OpenCart應用程序。 Javascripts在settings.php中加載到路徑'/catalog/controller//settings.php中，代碼如下：

 $this->document->addScript('catalog/view/theme/<theme>/lib/lazy/jquery.lazy.1.6.min.js');
    $this->journal2->minifier->addScript('catalog/view/theme/<theme>/lib/actual/jquery.actual.min.js', 'header');
    $this->journal2->minifier->addScript('catalog/view/theme/<theme>/lib/hover-intent/jquery.hoverIntent.min.js', 'footer');

這里，'theme'表示安裝的主題名稱。 我想在OpenCart中推遲或異步這些javascript加載，我該怎么辦呢？

我知道addScript語法有1s參數作為文件，第二個位置，第3個延遲和第4個異步，其中defer和async可以是boolean。 我已經嘗試過如下語句來查看推遲false和async true：

 $this->journal2->minifier->addScript('catalog/view/theme/<theme>/lib/hover-intent/jquery.hoverIntent.min.js', 'footer', false, true);

但我不確定這是否有效。 請建議

Answer 1

這是一個我已經使用了很長一段時間的腳本元素。

通過這種方式，您可以很好地控制文件的加載，並且可以在加載所有DOM后開始加載任何內容，只需確保在加載時DOM中的任何位置都不需要這些文件。

<head>
    <title></title>
    <link rel='stylesheet' type='text/css' href='css.css' />
    <script type='text/javascript'>         

        var DomLoaded = {
            done: false, onload: [],
            loaded: function () {
                if (DomLoaded.done) return;
                DomLoaded.done = true;
                if (document.removeEventListener) { document.removeEventListener('DOMContentLoaded', DomLoaded.loaded, false); }
                for (i = 0; i < DomLoaded.onload.length; i++) DomLoaded.onload[i]();
            },
            load: function (fireThis) {
                this.onload.push(fireThis);
                if (document.addEventListener) {
                    document.addEventListener('DOMContentLoaded', DomLoaded.loaded, false);
                } else {
                    /*IE<=8*/
                    if (/MSIE/i.test(navigator.userAgent) && !window.opera) {
                        (function () {
                            try { document.body.doScroll('up'); return DomLoaded.loaded(); } catch (e) { }
                            if (/loaded|complete/.test(document.readyState)) return DomLoaded.loaded();
                            if (!DomLoaded.done) setTimeout(arguments.callee, 10);
                        })();
                    }
                }
                /* fallback */
                window.onload = DomLoaded.loaded;
            }
        };

        DomLoaded.load(function () {
            var d = document;
            var h = d.getElementsByTagName('head')[0];
            var s = d.createElement('script');
            s.setAttribute('type', 'text/javascript');
            s.setAttribute('async', true);
            s.setAttribute('defer', true);
            s.setAttribute('src', '/path/to/scripts.js');
            h.appendChild(s);
        });

    </script>
</head>

這里有一篇很好的文章，它描述了一些加快速度的方法，其中之一就是將你的js文件組合成1或2-3-4，根據哪一個需要。 好處是http請求較少。

http://exisweb.net/web-site-optimization-making-javascript-load-faster

谷歌充滿了文章

https://www.google.com/search?q=speed%20up%20loading%20javascript%20files&rct=j

Answer 2

為減少頁面加載時間，您必須做兩件事

減少請求數量
減少包裝尺寸

為減少請求數，您可以將所有javascripts和css合並到一個文件中。 您還應該應用延遲加載圖像（這有助於減少包大小）

如果您正在運行VPS，您可以嘗試安裝mod_pagespeed（由谷歌開發） - 這將有助於減少很多頁面加載時間。

我不確定您是否使用過gtmetrix.com或http://www.webpagetest.org/來查看您的網站速度。

根據我的經驗，延遲加載JavaScript對你沒有多大幫助

如何在OpenCart中推遲或異步javascript

問題描述

2 個解決方案

解決方案1
3 2016-01-19 20:49:04

解決方案2
0 2016-01-21 17:06:12

如何在OpenCart中推遲或異步javascript

問題描述

2 個解決方案

解決方案1 3 2016-01-19 20:49:04

解決方案2 0 2016-01-21 17:06:12

解決方案1
3 2016-01-19 20:49:04

解決方案2
0 2016-01-21 17:06:12