【问题标题】:JavaScript how to catch event when lazy loaded script is ready?JavaScript如何在延迟加载脚本准备好时捕获事件?
【发布时间】:2011-07-18 06:56:09
【问题描述】:

我有一个延迟加载的 JavaScript 文件,当文件中的类准备好使用时,如何捕获事件?我只需要在特定情况下加载此脚本。因此它不是通过 onload 而是在 if 子句中加载的。

我从这里获取的延迟加载代码:http://friendlybit.com/js/lazy-loading-asyncronous-javascript/

if (externalClassRequired) {
    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);

    // When do I know when the class named "geo" is available?
}

更新:
对不起,伙计们,我完全忘记了阿贾克斯! :) 我非常专注于我的问题,以至于我没有看到@Tokimon 的明显解决方案。通过 jQuery 最简单的解决方案是:

$.getScript('http://yourdomain.com/script.js', function() {
  // callback or use the class directly
});

【问题讨论】:

    标签: javascript events


    【解决方案1】:
    if (s.readyState) s.onreadystatechange = function () {
        if (s.readyState === "loaded" || s.readyState === "complete") {
            s.onreadystatechange = null;
            callback();
        }
    }; else s.onload = function () {
        callback();
    };
    

    【讨论】:

    • 好的,这意味着“加载”(HTTP = 200)文件中的类可以使用了吗?
    • @powtac 是的,意思是下载并解析。分号的存在是有原因的。
    【解决方案2】:

    或者您可以通过 ajax 获取脚本。然后您确定在触发 ajax succes 事件时加载了脚本:)

    【讨论】:

      【解决方案3】:

      如果我理解您想要正确完成的任务。这就是存在回调方法的原因。

      这里解释得很好 Getting a better understanding of callback functions in JavaScript

      【讨论】:

        【解决方案4】:

        因为它需要一个 HTTP 请求,你应该可以在它上面放置一个 onload 事件。

        s.onload = function() {
          // do something
        }
        

        在“更快的网站”中,Steve Souders 提供了一个解决方案,可以看到 here

        【讨论】:

          【解决方案5】:
          var onloadCallback = function() {
              alert('onload');
          }
          
          var s   = document.createElement('script');
          s.type  = 'text/javascript';
          s.async = true;
          s.onreadystatechange = function () { // for IE
            if (this.readyState == 'complete') onloadCallback();
          };
          s.onload = onloadCallback; // for other browsers
          s.src   = 'http://yourdomain.com/script.js';
          var x   = document.getElementsByTagName('script')[0]
          x.parentNode.insertBefore(s, x);   
          

          您也可以使用 XMLHttpRequest 来加载文件。

          【讨论】:

          • Opera 会触发两次回调。
          猜你喜欢
          • 2019-01-23
          • 2018-08-02
          • 2012-03-25
          • 1970-01-01
          • 2023-03-26
          • 1970-01-01
          • 1970-01-01
          • 2015-03-08
          • 1970-01-01
          相关资源
          最近更新 更多