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

新逸网络 1.5K 0

背景说明

很多网站都有使用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)

<spanid='cnzz_stat_icon_123456789'></span>
<scripttype="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,增加兼容性)

<spanid='cnzz_stat_icon_123456789'></span>
<scripttype="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)

<spanid='cnzz_stat_icon_123456789'></span>
<scripttype="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)

<spanid='cnzz_stat_icon_123456789'></span>
<scripttype="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>

统计代码使用技巧

  • 隐藏统计图标和文字
<divstyle="display: none;">
    <scripttype="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文件示例

发表评论 取消回复
表情 图片 链接 代码

分享