如何在页面完全加载后加载注入的JavaScript脚本？

你可以通过以下两种方式实现页面完全加载后再执行这段脚本，避免阻塞页面渲染：

方法一：使用jQuery的$(document).ready() #

直接将脚本逻辑包裹到$(document).ready()的回调中，确保DOM完全加载后再执行注入操作：

<script type="text/javascript">
$(document).ready(function() {
    var _tsid = 'XXXX';
    _tsConfig = {
      'yOffset': '0', // offset from page bottom
      'variant': 'custom_reviews', // default, reviews, custom, custom_reviews
      'customElementId': 'MyCustomTrustbadge', // required for variants custom and custom_reviews
      'trustcardDirection': 'bottomLeft', // for custom variants: topRight, topLeft, bottomRight, bottomLeft
      'customBadgeWidth': '', // for custom variants: 40 - 90 (in pixels)
      'customBadgeHeight': '', // for custom variants: 40 - 90 (in pixels)
      'disableResponsive': 'false', // deactivate responsive behaviour
      'disableTrustbadge': 'false' // deactivate trustbadge
    };
    var _ts = document.createElement('script');
    _ts.type = 'text/javascript';
    _ts.charset = 'utf-8';
    _ts.async = true;
    _ts.src = '//widgets.trustedshops.com/js/' + _tsid + '.js';
    var __ts = document.getElementsByTagName('script')[0];
    __ts.parentNode.insertBefore(_ts, __ts);
});
</script>

方法二：使用原生JavaScript（无需jQuery） #

如果项目未引入jQuery，推荐用原生DOMContentLoaded事件，它会在DOM加载完成后触发，效果等同于jQuery的ready：

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    var _tsid = 'XXXX';
    _tsConfig = {
      'yOffset': '0', // offset from page bottom
      'variant': 'custom_reviews', // default, reviews, custom, custom_reviews
      'customElementId': 'MyCustomTrustbadge', // required for variants custom and custom_reviews
      'trustcardDirection': 'bottomLeft', // for custom variants: topRight, topLeft, bottomRight, bottomLeft
      'customBadgeWidth': '', // for custom variants: 40 - 90 (in pixels)
      'customBadgeHeight': '', // for custom variants: 40 - 90 (in pixels)
      'disableResponsive': 'false', // deactivate responsive behaviour
      'disableTrustbadge': 'false' // deactivate trustbadge
    };
    var _ts = document.createElement('script');
    _ts.type = 'text/javascript';
    _ts.charset = 'utf-8';
    _ts.async = true;
    _ts.src = '//widgets.trustedshops.com/js/' + _tsid + '.js';
    var __ts = document.getElementsByTagName('script')[0];
    __ts.parentNode.insertBefore(_ts, __ts);
});
</script>

补充说明 #

你原代码里的_ts.async = true已经能让外部JS异步加载、不阻塞渲染，但把整个注入逻辑放到页面加载完成的回调中，能确保脚本执行时页面DOM完全就绪，避免因目标元素（比如customElementId对应的节点）未加载完成导致的异常。

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