Question

我正在使用在网站上加载iframe的JavaScript。我想懒加载该脚本。我尝试使用async或defer并动态加载，但没有加载iframe。有什么办法可以延迟或几秒钟后加载此脚本。

<div class="editorskit-no-mobile">
<script src="//idx.diversesolutions.com/scripts/controls/Remote-Frame.aspx?MasterAccountID=1606&amp;SearchSetupID=41&amp;LinkID=474907&amp;Height=2000"></script>
</div>

Answer 1

一个非常简单的代码解决方案，让<div>不包含任何内容

<div class="editorskit-no-mobile"></div>

然后是一个简单的createElement和appendChild

<script>
  var divElm = document.querySelector('.editorskit-no-mobile')
  setTimeout(function() {
    appendScript(divElm)
  }, 2000) // 2 seconds

  var appendScript = function(elm) {
    var s = document.createElement('script')
    s.src = '//idx.diversesolutions.com/scripts/controls/Remote-Frame.aspx?MasterAccountID=1606&amp;SearchSetupID=41&amp;LinkID=474907&amp;Height=2000'
    s.type = 'text/javascript'
    s.async = !0
    elm.appendChild(s)
  }
</script>

这样，您可以即时创建<script>标记，而无需加载任何内容，直到将其实际添加到DOM中为止。

延迟加载外部javascript

1 个答案: