CNZZ延迟加载方案，解决统计代码加载缓慢问题

背景说明

  很多网站都有使用CNZZ用于统计网站的访问量和访问情况，也有很多站长遇到过因为CNZZ统计代码加载缓慢而影响页面打开效果的情况。

  下面分享一个使统计代码延迟加载的代码，引用后不会再因为统计代码无法加载而影响网站打开速度。

CNZZ原始统计代码

<script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1277943602'%3E%3C/span%3E%3Cscript src='https://s9.cnzz.com/z_stat.php%3Fid%3D1277943602' type='text/javascript'%3E%3C/script%3E"));</script>

改进后的代码（原生js）

<span id='cnzz_stat_icon_123456789'></span>
<script type="text/javascript">
    window.onload = function() {
        var cz = document.createElement("script");
        cz.src = "//s9.cnzz.com/z_stat.php?id=123456789";
        document.getElementsByTagName('body')[0].appendChild(cz);
    }
</script>

改进后的代码（原生js，增加兼容性）

<span id='cnzz_stat_icon_123456789'></span>
<script type="text/javascript">
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = function() {
            var cz = document.createElement("script");
            cz.src = "//s9.cnzz.com/z_stat.php?id=123456789";
            document.getElementsByTagName('body')[0].appendChild(cz);
        }
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            var cz = document.createElement("script");
            cz.src = "//s9.cnzz.com/z_stat.php?id=123456789";
            document.getElementsByTagName('body')[0].appendChild(cz);
        }
    }
</script>

改进后的代码（原生jQuery）

<span id='cnzz_stat_icon_123456789'></span>
<script type="text/javascript">
    $(function() {
        var cz = document.createElement("script");
        cz.src = "//s9.cnzz.com/z_stat.php?id=123456789";
        document.getElementsByTagName('body')[0].appendChild(cz);
    });
</script>

最终代码（兼容原生js和jQuery）

<span id='cnzz_stat_icon_123456789'></span>
<script type="text/javascript">
    if (typeof jQuery != "undefined" && typeof $ != 'undefined') {
        $(function() {
            cnzz_stat_func();
        });
    } else {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = function() {
                cnzz_stat_func();
            }
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }
                cnzz_stat_func();
            }
        }
    }

    function cnzz_stat_func() {
        var cz = document.createElement("script");
        cz.src = "//s9.cnzz.com/z_stat.php?id=123456789";
        document.getElementsByTagName('body')[0].appendChild(cz);
    }
</script>

统计代码使用技巧

• 隐藏统计图标和文字

<div style="display: none;">
    <script type="text/javascript">
    ...
    </script>
</div>

• 统计代码不同显示方式

1. 显示统计图标
   /z_stat.php?id=123456789&show=pic
2. 显示在线人数
   /z_stat.php?id=123456789&online=2
3. 显示统计文字
   /z_stat.php?id=123456789&web_id=123456789

• 建议将统计代码放入JS文件，修改简单，引用方便。js文件示例