服务报价 | 域名主机 | 网络营销 | 软件工具| [加入收藏]
 热线电话: #
当前位置: 主页 > php教程 > OpenCart教程 >

解决Opencart2.0版打开速度慢

时间:2016-01-20 15:46来源:未知 作者:最模板 点击:
Opencart 2.0 和 1.5.6版本并不是完全兼容的,如果你现在有正在运行的opencart站点,不建议你升级。 扯了一段题外话。如果你在本地安装opencart 2.0站点试用的话,你会发现打开很慢,openc

Opencart 2.0 和 1.5.6版本并不是完全兼容的,如果你现在有正在运行的opencart站点,不建议你升级。
扯了一段题外话。如果你在本地安装opencart 2.0站点试用的话,你会发现打开很慢,opencart 2.0版本用了很多时髦技术,其中还包括Google Fonts。我们知道国内把Google的IP地址都给墙了,所以,你没办法,你只能选择把字体下载到本地,或者调用国内的CDN,比如360。

 

文件位置 : catalog\view\theme\default\template\common\header.tpl
找到:<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />
替换为:<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet'>

如果你想进一步优化opencart的打开速度,不妨把opencart引入的JS类库等都换成CDN。

找到:<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
替换为:

<!-- use MAX CDN -->
<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
!window.jQuery && document.write('<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text\/javascript"><\/script>');
</script>

为了防止CDN宕机,(虽然这种情况极少见),我还是做了判断,在宕机的情况下调用本地的jQuery类库。

如果要对bootstrap的CDN引入也做此判断的话,就需要动态判断JS和CSS是否引入成功。

 

新建文件: \catalog\view\javascript\custom.js

//判断是否成功引入css文件
function isCssLoaded(link) {
    try {
        if (link.sheet && link.sheet.cssRules.length > 0)
            return true;
        else if (link.styleSheet
            && link.styleSheet.cssText.length > 0)
            return true;
        else if (link.innerHTML
            && link.innerHTML.length > 0)
            return true;
    }
    catch (ex) {
        if (ex.name && ex.name == 'NS_ERROR_DOM_SECURITY_ERR')
            return true;
    }
    return false;
}

//动态引入CSS、JS文件
var dynamicLoading = {
    css: function(path){
        if(!path || path.length === 0){
            throw new Error('argument "path" is required !');
        }
        var head = document.getElementsByTagName('head')[0];
        var link = document.createElement('link');
        link.href = path;
        link.rel = 'stylesheet';
        link.type = 'text/css';
        head.appendChild(link);
    },
    js: function(path){
        if(!path || path.length === 0){
            throw new Error('argument "path" is required !');
        }
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.src = path;
        script.type = 'text/javascript';
        head.appendChild(script);
    }
}

引入custom.js文件到header.tpl里,<script src="catalog/view/javascript/custom.js" type="text/javascript"></script>
再加入以下代码:

<script type="text/javascript">
    var isGoo = isCssLoaded("//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700");
    //如果Google Fonts无法加载,引入360的CDN类库
    if(!isGoo){
      dynamicLoading.css("http://fonts.useso.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext");
    }
    //Bootstrap加载失败,引入本地的类库文件
    var isBootCss = isCssLoaded("https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css");
    if(!isBootCss){
      dynamicLoading.css("catalog/view/javascript/bootstrap/css/bootstrap.min.css");
    }
</script>

 

(责任编辑:最模板)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
热点内容