Я использую этот простой загрузчик скриптов для динамической загрузки Javascript после загрузки основной CSS. Браузеры, такие как Safari / Chrome, работают отлично и загружают сценарии один раз.
Но Firefox запускает событие дважды, что приводит к неправильной работе страницы.
Как я могу предотвратить это?
var Loader = function () {};
Loader.prototype = {
require: function (scripts, delay, id, callback) {
this.loadCount = 0;
this.totalRequired = scripts.length;
this.callback = callback;
var self = this;
this.timerID = window.setTimeout(function () {
for (var i = 0; i < scripts.length; i++) {
self.writeScript(scripts[i], id[i]);
}
window.clearTimeout(self.timerID);
}, delay);
},
loaded: function (evt) {
this.loadCount++;
if (this.loadCount === this.totalRequired && typeof this.callback == 'function') {
this.callback.call();
}
},
writeScript: function (src, id) {
var self = this;
var s = document.createElement('script');
s.defer = true;
s.id = id;
s.src = src;
s.addEventListener('load', function (e) {
self.loaded(e);
}, false);
document.body.appendChild(s);
}
};
function initJS(vendor, js) {
var vendor_loader = new Loader();
vendor_loader.require(vendor,
0,
['js1'],
function () {
var js_loader = new Loader();
js_loader.require(js, 500, ['js2', 'js3', 'js4']);
});
}
<head>
<link rel="stylesheet" href="/dist/styles/screen.css" media="print" onload="this.media='all';initJS(['/dist/scripts/vendor.js'],['/dist/scripts/main.js', '/dist/scripts/addons.js', '/dist/scripts/recaptcha.js']);">
</head>