[英]Adding events to detect when all dynamically added scripts are loaded
代码中没有抛出任何错误,因此我只能假设未触发事件或未正确添加事件。 任何人都可以确定这里的问题吗?下面的代码。 在这里摆弄 。
$('#fake-body').append('init<br />');
var scriptTag,
scriptsLoaded = 0,
scripts = ['//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js', '//codeorigin.jquery.com/ui/1.9.2/jquery-ui.min.js'],
scriptLoadedCallback = function(val) {
scriptsLoaded++;
$('#fake-body').append('callback called for '+val+' | scriptsloaded = '+scriptsloaded+' & length = '+scripts.length+'<br />');
if(scriptsLoaded === scripts.length) {
$('#fake-body').append('all loaded');
}
};
$.each(scripts, function(index, value) {
$('#fake-body').append('preparing '+value+'<br />');
scriptTag = document.createElement('script');
scriptTag.type = 'text/javascript';
scriptTag.src = value;
if(typeof scriptTag.addEventListener !== 'undefined') {
$('#fake-body').append('add event for good browsers<br />');
scriptTag.addEventListener('load', (function() {
scriptLoadedCallback(value);
}), false);
} else {
$('#fake-body').append('add event for the other one<br />');
scriptTag.attachEvent('onreadystatechange', function() {
if(scriptTag.readyState === 'loaded') {
scriptLoadedCallback(value);
}
});
}
$('#fake-body').append('appending script<br />');
$('#fake-body').append(scriptTag);
});
$('#fake-body').append('complete');
使用普通Javascript而不是jquery来加载javascript文件(因为jquery不会触发当前代码中的加载回调),因此请替换:
$('#fake-body').append(scriptTag);
有:
$('#fake-body')[0].appendChild(scriptTag);
或者,如果您坚持使用jquery,则必须遵守以下语句顺序(或使用getScript ):
$body.append(scriptTag);
scriptTag.attachEvent
scriptTag.src = scriptUrl;
你必须通过引用另一个错误scriptsloaded
而非scriptsLoaded
回调。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.