Question

对于餐馆网站，我需要使用一个很难加载的预订模块加载它的脚本需要花费4秒钟的时间，并且我需要处理380mb / s的以太网连接。网站运行需要4到6秒。

这是我必须实施的代码。

<div id="[reservation-company-name]-booknow">
    <script type="text/javascript" src="//www.[reservation-company-name].com/WID/Widget/Cors"></script>
    <script>bookNow({companyID: '[numbers]',target: '#[reservation-company-name]-booknow',language: 'NL'});</script>
</div>

预约窗口小部件隐藏在主页上，但这仍然意味着脚本将在网页上加载我知道在页面完全加载后我必须动态加载脚本。

$(window).load(function() {
    $("#[reservation-company-name]-booknow").append("<script type='text/javascript' src='//www.[reservation-company-name].com/WID/Widget/Cors'></script><script>bookNow({companyID: '[numbers]',target: '#[reservation-company-name]-booknow',language: 'NL'});</script>
});

但问题是，第一个脚本仍在加载时，第二个带有bookNow函数的脚本会触发。这会导致错误，并且窗口小部件无法正常加载当我在运行第二个脚本时设置超时时，小部件将加载，但是由于连接速度不同，无法在超时时间设置正确的时间。

我在Stackoverflow上搜索了如何在执行函数之前等待动态加载的脚本完全加载。我发现的大部分内容都不是关于动态加载的脚本，或者是关于异步和推迟的，这对我来说并不起作用。

怎么办？

Answer 1

嗯，我自己找到了解决方案，只是想把它留给别人找，因为我在这里找不到答案。

Jquery has a nice getScript function加载脚本然后运行一个函数。正是我在寻找的东西。

$(window).load(function() {
    var url = "//www.[reservation-company-name].com/WID/Widget/Cors";
    $.getScript(url, function() {
        $('#[reservation-company-name]-booknow').append("<script>bookNow({companyID: '686937',target: '#[reservation-company-name]-booknow',language: 'NL'});</script>");
    });
 });

等待外部动态加载脚本在执行脚本之前加载

1 个答案: