Question

如何确保转换函数（在myjs.js中定义）始终执行？是否存在因为在加载myjs.js之前调用它而失败的情况？

<body>
<script type='text/javascript'>
$(function(){
   //call a function within myjs.js
   $("#id").conversion({
           settings : url
    });
});
</script>

/*loading myjs.js asynchronously*/
<script type='text/javascript'>
(function(){
    var a = document.createElement('script');
    a.type = 'text/javascript';
    a.async = true;
    a.src = 'http://mydomain/myjs.js'; 
    var b = document.getElementsByTagName('script')[0];
    b.parentNode.insertBefore(a, b);
})();
</script>

</body>

这是确保始终调用转换函数的正确方法吗？

$.ajax({
  url: 'http://mydomain/myjs.js',
  dataType: 'script',
  cache: true, // otherwise will get fresh copy every page load
  success: function() {
    // script loaded, do stuff!
     $("#id").conversion({
               settings : url
        });
  }
}

Answer 1

由于您是异步加载它，因此需要确保在运行代码之前已加载它（可能是在脚本元素上使用和onload回调？）。或者你可以只包括脚本＆＃34; normal＆＃34;方式：

<script src="myjs.js"></script>
<script>
    $(function () {
        $("#id").conversion({
            settings : url
        });
    });
</script>

修改：如果您将所有script元素放在结束</body>标记之前，则无论如何都会在脚本完成之前加载整个页面，然后在＆＃34中没有任何损害;正常＆＃34;加载。此外，通过将所有脚本放在页面的最后，您不需要在＆＃34; dom ready＆＃34;因为dom已经装好了。

编辑：您也可以将dom准备好与窗口加载交换（不确定）：

$(window).load(function () {
    $("#id").conversion({
        settings : url
    });
});

Answer 2

首先，$(function(){表示jQuery已加载，不一定是您的其他脚本。因此，只是这样做并不能保证您的功能将在脚本加载后运行。因此，可以在加载脚本之前调用函数。

要解决此问题，您需要以下内容：

(function() {
    function async_load(){
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'http://yourdomain.com/script.js';
        var x = document.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent('onload', async_load);
    else
        window.addEventListener('load', async_load, false);
})();

有关详细信息，请参阅：http://friendlybit.com/js/lazy-loading-asyncronous-javascript/。

编辑澄清想法并改进示例：

这应该可以工作，因为它等待页面加载，然后加载你的异步，一旦加载，就会触发一个函数，你可以调用加载文件的外部函数。

首先加载脚本异步：

(function(){
    var a = document.createElement('script');
    a.type = 'text/javascript';
    a.async = true;
    a.src = 'http://www.example.com/somefile.js';
    var b = document.getElementsByTagName('script')[0];
    b.parentNode.insertBefore(a, b);
})();

接下来，做这样的事情：

function my_initialization_function() {
    //call a function within myjs.js
   $("#id").conversion({
           settings : url
    });
}

    if(document.addEventListener) {
        window.addEventListener("load", my_initialization_function(), false );
    }
    else if(window.attachEvent) {
        window.attachEvent("onload", my_initialization_function());
    }

说明： (document.addEventListener)为支持它的浏览器添加了一个事件监听器（所有非IE浏览器）。 (window.attachEvent)代替支持attachEvent（IE浏览器）的浏览器

这个函数调用总是等待异步加载的脚本然后执行吗？

2 个答案: