Question

我有一个模块，一旦页面滚动到某一点，我就会在Javascript中按以下方式加载：

newScript = document.createElement('script');
newScript.setAttribute('src','scripts/GalleryLoader-min.js');
document.body.appendChild(newScript);

这很好用，但是我想在加载后调用init（）函数。以下工作，但似乎我应该能够把它自己的功能和重用：

var currentChance = 500;
var refreshIntervalId = setInterval(function(){
    currentChance--;

    console.log("Waited");
    if (typeof NS.GalleryLoader !== 'undefined') {
        console.log("Loaded: "+NS.GalleryLoader);
        NS.GalleryLoader.init();
        clearInterval(refreshIntervalId);
    }
    else if (currentChance > 0) {
        console.log("Trying again: "+NS.GalleryLoader);
    }
    else {
        console.log("Unable to Load "+NS.GalleryLoader);
        clearInterval(refreshIntervalId);
    }   
}, 10);

当我尝试将它放入一个函数时，模块总是“未定义”，并且永远不会告诉我它已加载。很确定我当前没有传递命名空间/模块名称来检查它。

Answer 1

您可以使用HTMLScriptElement的onload事件。

newScript.addEventListener('load', funcion() {
  NS.GalleryLoader.init();
});

您甚至可以创建这样的通用函数：

function loadScript(path, callback) {
  var s = document.createElement('script');
  if (callback)
    s.addEventListener('load', callback);
  s.async = true;
  s.src = path;
  document.querySelector('head').appendChild(s);
}

然后使用它：

loadScript('scripts/GalleryLoader-min.js', function() {
  NS.GalleryLoader.init();
});

Answer 2

您可能想要使用元素load事件

newScript.onload=function(){
//YOUR CODE HERE
}

如何轮询在Javascript中动态加载的模块

2 个答案: