如何实现Smartsupp聊天集成在页面加载后延迟3-5秒正常加载

失效原因说明 #

之前直接套setTimeout失效的核心原因有两个：

• 未等待页面加载完成就启动计时，可能出现依赖的DOM节点未就绪的问题
• 将全局配置变量_smartsupp放在了异步作用域内，Smartsupp官方loader读取不到密钥导致初始化失败

可用修改代码 #

<!-- Smartsupp Live Chat script -->
<script type="text/javascript">
// 全局声明配置，保证loader可正常读取
var _smartsupp = _smartsupp || {};
_smartsupp.key = '5eafc30579aa75bb8bcb1c567a44502fc51fcbad';

// 页面完全加载后启动延迟逻辑
window.addEventListener('load', function() {
    // 延迟4秒加载，修改数值可调整延迟时长：3000=3秒，5000=5秒
    setTimeout(function() {
        // 避免重复加载
        if (window.smartsupp) return;
        (function(d) {
            var s,c,o=smartsupp=function(){ o._.push(arguments)};o._=[];
            s=d.getElementsByTagName('script')[0];c=d.createElement('script');
            c.type='text/javascript';c.charset='utf-8';c.async=true;
            c.src='https://www.smartsuppchat.com/loader.js?';
            s.parentNode.insertBefore(c,s);
        })(document);
    }, 4000);
});
</script>

逻辑说明 #

• 配置变量放在全局作用域，完全兼容官方loader的读取规则
• 监听load事件确保页面首屏资源全部加载完成后再启动计时，不会拖慢页面本身的加载速度
• 新增重复加载判断，避免特殊场景下多次初始化导致的异常
• 保留原版SDK的全部初始化逻辑，所有原有功能不受影响

内容的提问来源于stack exchange，提问作者Yarushi