Как подождать пока скрипт загрузится?

Question

[Анатолий]

Имеется функция, которая зависит от внешнего скрипта, скрипт используется редко, поэтому подгружаю его по мере необходимости.
По порядку:
1. Есть функция suggestions, она зависит от внешнего скрипта jquery.suggestions.min.js
2. Внешний скрипт зависит от jQuery

Как дождаться загрузки внешнего скрипта, перед выполнением функции?

Сейчас код выглядит так:

contactFormScripts();

/* Проверяем, что загружена jQuery, иначе ждем */
function defer(method) {
  if (window.jQuery) { method(); }
  else { setTimeout(function() { defer(method) }, 50); }
}

function contactFormScripts() {
	// Подключаем jQuery, если она еще не подключена
	if(!window.jQuery){
    let script = document.createElement('script');
    script.type = "text/javascript";
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js';
    document.getElementsByTagName('body')[0].append(script);

  }

  // Подключаем внешний скрипт, он зависит от jQuery
  defer(function() {
		let script = document.createElement('script');
    script.type = "text/javascript";
    script.src = 'https://cdn.jsdelivr.net/npm/suggestions-jquery@20.2.2/dist/js/jquery.suggestions.min.js';
    document.getElementsByTagName('body')[0].append(script);
    contactFormScriptsInit();
  });
}

/* Функция, которая зависит от внешнего скрипта */
function contactFormScriptsInit() {
  $("#city").suggestions({
********************************
});
}

Comments

[Михаил]

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

[Анатолий]

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

Проблемы не будет, только если подключать так:

<script src="script1.js"...
<script src="script2.js"...
function aaa() {...

но мне этот вариант не подходит, так как из 100 загрузок страницы, скрипт нужен только 1 раз

Answer 1

[Александр]

const loadScript = (url, callback) => {
	const script = document.createElement('script');
	script.addEventListener('load', () => {
		callback();
	});

	script.src = url;

	document.body.append(script);
};

loadScript('SOME_URL', () => {
	console.log('Скрипт загружен');
});

const loadScript = url => new Promise(resolve => {
	const script = document.createElement('script');
	script.addEventListener('load', () => {
		resolve();
	});

	script.src = url;

	document.body.append(script);
});

loadScript('SOME_URL').then(() => {
	console.log('Скрипт загружен');
});

Comments

[Анатолий]

Я не особый знаток в js, как этим пользоваться? ))

Мне нужно так подключить jQuery и скрипт по очереди?

УРЛ подставлять здесь: script.src = url; ?

[Александр]

Анатолий, обновил ответ.

[drakebell32]

Александр, восхитительный код месье, так производительней на 37% судя по "lighthouse"

Answer 2

[Анатолий]

Вопрос решил так, написал, чтобы не забыть

startFunc();

function startFunc() {

   // Подключаем jQuery, если она еще не подключена
   if(!window.jQuery) {
    const script = document.createElement('script');
    script.type = "text/javascript";
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js';
    // Слушаем, когда jQuery загрузится и загружаем внешний
    script.addEventListener('load', ()=> { scriptLoad(); });
    document.body.append(script);
  } else {
    scriptLoad();
  }

  // Загрузка внешнего скрипта
  function scriptLoad() {
		const script = document.createElement('script');
	  script.type = "text/javascript";
	  script.src = 'https://cdn.jsdelivr.net/npm/suggestions-jquery@20.2.2/dist/js/jquery.suggestions.min.js';
	  // Слушаем, когда загрузится внешний скрипт и запускаем функцию
	  script.addEventListener('load', ()=> { scriptInit(); });
	  document.body.append(script);
  }

	// Инициализация функции
	function scriptInit() { }
}