Как определить, загрузился ли скрипт или нет?

Question

[dom12]

Здравствуйте.
Сам код рабочий, но я не знаю как определить загрузился ли url-скрипт или нет.
Мне нужно написать условие для функции loadScriptBody, в котором если созданный скрипт еще не прогрузился, то ждать до полной загрузки. Но если скрипт до этого был создан, то сразу запускаем функцию c.callback();.
Тут я не знаю как определить готовность скрипта.

Сам код:

const arrayToUrlParams = (url, array) => {
		let start = true;
		for (let [NAME,VALUE] of Object.entries(array)) {
			if(VALUE != null){
				if(start){
					url += `?${NAME}=${VALUE}`;
				}else{
					url += `&${NAME}=${VALUE}`;
				}
				start = false;
			}
		}
		return url;
	};
const isScript = (url) => {
		let scripts = document.getElementsByTagName('script');
		for(let i = scripts.length; i--;) if(scripts[i].src == url) return scripts[i];
		return false;
	};
const loadScriptBody = (c) => {
		let url = (c.params)?arrayToUrlParams(c.url,c.params):c.url;
		if(script = isScript(url)){
			//В этом месте нужно определить загруженность url-скрипта. 
			//Если скрип еще не загрузился,  то ждём:
			script.addEventListener("load", () => {
				c.callback();
			}, false);
			//Но если скрипт загрузился, то сразу запускаем функцию:
			//c.callback();
		}else{
			let script = document.createElement('script');
			script.src = url;
			script.addEventListener("load", c.callback, false);
			if(c.attributes && c.attributes.length>0){
				for(let i = 0; i < c.attributes.length; i++){
					script.setAttribute(c.attributes[i].name,c.attributes[i].value);
				}
			}
			document.getElementsByTagName('head')[0].appendChild(script);
		}
	};
const mapYandex = () => {

	};
loadScriptBody({
	url:'https://api-maps.yandex.ru/2.1/',
	params:{
		apikey:apikey,
		lang:'ru_RU'
	},
	callback:mapYandex
});

В этом месте нужно определить загруженность url-скрипта:

if(script = isScript(url)){
			//Если скрип еще не загрузился,  то ждём:
			script.addEventListener("load", () => {
				c.callback();
			}, false);
			//Но если скрипт загрузился, то сразу запускаем функцию:
			//c.callback();
		}

Посоветуйте пожалуйста как определить utl-скрипт загружен или нет.

Comments

[Adamos]

10 секунд в гугле: https://stackoverflow.com/questions/16230886/tryin...

[dom12]

Adamos, Мимо, Вообще не то. Там вопрос в нерабочем коде, а у меня вопрос - как определить что скрипт загружен.

[Adamos]

dom12, там вопрос, как повесить на загрузку скрипта обработчик. Естественный путь определения, что загружено, а что нет.

[Виктор]

if(script = isScript(url)){ script.addEventListener(

addEventListener на boolean? Со здоровьем все хорошо?

Answer 1

[holllop]

Для того чтобы определить, загружен ли скрипт или находится в процессе загрузки, можно использовать флаги или атрибуты, которые вы могли бы установить в элементе скрипта. В вашем случае, как один из вариантов, можно добавить к элементу скрипта атрибут data-loaded, который будет указывать на его состояние. Для этого вам нужно модифицировать функцию isScript.

spoiler

Примерно как-то так, если я правильно понял ход ваших мыслей

const isScriptLoaded = (url) => {
    const scripts = document.getElementsByTagName('script');
    for(let i = scripts.length; i--;) {
        if(scripts[i].src === url) {
            return scripts[i].getAttribute('data-loaded') === 'true' ? scripts[i] : false;
        }
    }
    return false;
};

const loadScriptBody = (c) => {
    let url = (c.params) ? arrayToUrlParams(c.url, c.params) : c.url;
    let script = isScriptLoaded(url);
    if(script){
        // Скрипт уже загружен и готов к использованию:
        c.callback();
    } else {
        script = document.createElement('script');
        script.src = url;
        script.setAttribute('data-loaded', 'false');  // Устанавливаем флаг загруженности в 'false'
        script.addEventListener("load", () => {
            script.setAttribute('data-loaded', 'true'); // Меняем флаг на 'true', когда скрипт загрузился
            c.callback();
        }, false);

        if(c.attributes && c.attributes.length > 0){
            for(let i = 0; i < c.attributes.length; i++){
                script.setAttribute(c.attributes[i].name, c.attributes[i].value);
            }
        }
        document.getElementsByTagName('head')[0].appendChild(script);
    }
};

Comments

[dom12]

Огромного тебе здоровья.
Блин, как я сам то до этого не догадался.
script.setAttribute('data-loaded', 'false');

[WbICHA]

dom12, для работы с дата атрибутами есть dataset.

[dom12]

WbICHA, Вы вообще о чем?

[WbICHA]

dom12, а загуглить, чтобы понять о чём я, никак?

[dom12]

WbICHA, Я знаю что это такое dataset, вопрос был - что вы этим хотите сказать?

• Что есть такой свойстве как dataset.
  
• Что лучше использовать dataset вместо setAttribute.
  

Или есть другой смысл.

[WbICHA]

dom12, ты не знаешь, иначе бы не задавал такие вопросы. Читай: https://developer.mozilla.org/en-US/docs/Web/API/H...

[dom12]

WbICHA, Я согласен тем что я не все знаю.
Мне комфортно использовать setAttribute.

Answer 2

[YuriyBum334]

Можно навесить на тег скрипта событие load (onload)

<script id="yourScriptId" type="text/javascript" src="/path/to/script.js"></script>
<script>
   document.querySelector("#yourScriptId").addEventListener("load", (event) => {
     // Действия, когда скрипт загружен
})
</script>

Comments

[dom12]

holllop ответил на вопрос.