Callback после загрузки скрипта

Описание

Браузер позволяет отслеживать загрузку сторонних ресурсов: скриптов, ифреймов, изображений и др.

Для этого существуют два события:

load – успешная загрузка,
error – во время загрузки произошла ошибка.

script.onload

Главный помощник – это событие load. Оно срабатывает после того, как скрипт был загружен и выполнен.

Например:

let script = document.createElement('script');

// мы можем загрузить любой скрипт с любого домена
script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"
document.head.append(script);

script.onload = function() {
  // в скрипте создаётся вспомогательная переменная с именем "_"
  alert(_.VERSION); // отображает версию библиотеки
};

script.onerror

Ошибки, которые возникают во время загрузки скрипта, могут быть отслежены с помощью события error.

Например:

let script = document.createElement('script');
script.src = "https://example.com/404.js"; // такого файла не существует
document.head.append(script);

script.onerror = function() {
  alert("Ошибка загрузки " + this.src); // Ошибка загрузки https://example.com/404.js
};

Код

      function loadScript(src, callback) {
	let script = document.createElement('script');
	script.src = src;
	script.onload = () => callback(script);
	document.head.append(script);
}
loadScript('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js', script => {
    console.log(`Cкрипт ${script.src} загрузился`);
});

Код

      function loadScripts(array,callback){
	var loader = function(src,handler){
		var script = document.createElement("script");
		script.src = src;
		script.onload = script.onreadystatechange = function(){
			script.onreadystatechange = script.onload = null;
			handler();
		}
		var head = document.getElementsByTagName("head")[0];
		(head || document.body).appendChild( script );
	};
	(function run(){
		if(array.length!=0){
			loader(array.shift(), run);
		}else{
			callback && callback();
		}
	})();
}
loadScripts([
	"https://www.google.com/recaptcha/api.js"
],function(){
	console.log(`Скрипты загружены`);
});

Код

      const loadScript = url =>
    new Promise((resolve, reject) => {
        const script = document.createElement("script");
        script.src = url;
        script.onload = resolve;
        script.onerror = e =>
                reject(Error(`${url} failed to load`))
        ;
        document.head.appendChild(script);
    });
const scriptURLs = [
	"https://www.google.com/recaptcha/api.js",
];
Promise.all(scriptURLs.map(loadScript))
    .then(async () => {
        console.log("Скрипты загружены:");
    })
    .catch(err => console.error(err));

Код

      if (typeof grecaptcha === "undefined") {
    let script = document.createElement('script');
    script.src = 'https://www.google.com/recaptcha/api.js';
    script.onload = renderWait;
    document.head.append(script);
} else {
    render();
}

function renderWait() {
    setTimeout(() => {
        if (typeof grecaptcha !== "undefined" && typeof grecaptcha.render !== "undefined") {
            render();
        } else {
            renderWait();
        }
    }, 200);
}

function render() {
    console.log("Скрипты загружены:");
}