Способы загрузки скриптов по AJAX с примерами

Расширенные примеры динамической загрузки скриптов

1. Последовательная загрузка нескольких скриптов с помощью цепочек Promise

function loadScriptPromise(url) {
  return new Promise(function(resolve, reject) {
    var script = document.createElement('script');
    script.src = url;
    script.onload = resolve;
    script.onerror = function() {
      reject(new Error('Не удалось загрузить ' + url));
    };
    document.head.appendChild(script);
  });
}

// Загрузка скриптов по порядку
loadScriptPromise('first.js')
  .then(function() {
    console.log('first.js загружен');
    return loadScriptPromise('second.js');
  })
  .then(function() {
    console.log('second.js загружен');
  })
  .catch(function(err) {
    console.error(err);
  });

Результат:

first.js загружен
second.js загружен

2. Загрузка скрипта с проверкой на уже существующий элемент

function loadScriptOnce(url, callback) {
  // Проверяем, есть ли уже скрипт с таким src
  var existing = document.querySelector('script[src="' + url + '"]');
  if (existing) {
    // Если скрипт уже загружен, вызываем колбэк сразу
    if (typeof callback === 'function') callback();
    return;
  }
  var script = document.createElement('script');
  script.src = url;
  script.onload = callback;
  script.onerror = function() {
    console.error('Ошибка загрузки: ' + url);
  };
  document.head.appendChild(script);
}

loadScriptOnce('lib.js', function() {
  console.log('lib.js готов к использованию');
});

Результат:

lib.js готов к использованию

3. Загрузка скрипта с таймаутом

function loadScriptWithTimeout(url, timeout, callback) {
  var script = document.createElement('script');
  script.src = url;
  var timer = setTimeout(function() {
    script.onload = null; // отключаем колбэк
    console.error('Таймаут загрузки: ' + url);
  }, timeout);
  script.onload = function() {
    clearTimeout(timer);
    if (typeof callback === 'function') callback();
  };
  script.onerror = function() {
    clearTimeout(timer);
    console.error('Ошибка загрузки: ' + url);
  };
  document.head.appendChild(script);
}

loadScriptWithTimeout('slow.js', 5000, function() {
  console.log('slow.js загружен вовремя');
});

4. Динамическая загрузка модульных скриптов с использованием import() и условной логикой

// Загрузка модуля в зависимости от условия
if (window.innerWidth < 768) {
  import('./mobile-module.js')
    .then(m => m.initMobile())
    .catch(e => console.warn('Мобильный модуль не загружен', e));
} else {
  import('./desktop-module.js')
    .then(m => m.initDesktop())
    .catch(e => console.warn('Десктопный модуль не загружен', e));
}

5. Загрузка скрипта с добавлением параметров для обхода кэша

function loadScriptWithCacheBust(url, callback) {
  var separator = url.indexOf('?') > -1 ? '&' : '?';
  var bustedUrl = url + separator + '_=' + Date.now();
  var script = document.createElement('script');
  script.src = bustedUrl;
  script.onload = callback;
  document.head.appendChild(script);
}

loadScriptWithCacheBust('https://api.example.com/widget.js', function() {
  console.log('Виджет загружен');
});

Результат:

Виджет загружен

6. Загрузка скрипта и выполнение после загрузки всех скриптов (Promise.all)

var urls = ['lib1.js', 'lib2.js', 'lib3.js'];
var promises = urls.map(function(url) {
  return loadScriptPromise(url); // используем функцию из примера 1
});

Promise.all(promises)
  .then(function() {
    console.log('Все скрипты загружены и выполнены');
    // Здесь можно инициализировать приложение
  })
  .catch(function(err) {
    console.error('Ошибка при загрузке одного из скриптов', err);
  });

7. Работа с ошибками: повторная попытка загрузки

function loadScriptWithRetry(url, retries, callback) {
  var attempt = 0;
  function tryLoad() {
    attempt++;
    var script = document.createElement('script');
    script.src = url;
    script.onload = function() {
      if (typeof callback === 'function') callback();
    };
    script.onerror = function() {
      if (attempt < retries) {
        console.log('Попытка ' + attempt + ' не удалась, повтор через 2 секунды');
        setTimeout(tryLoad, 2000);
      } else {
        console.error('Не удалось загрузить скрипт после ' + retries + ' попыток');
      }
    };
    document.head.appendChild(script);
  }
  tryLoad();
}

loadScriptWithRetry('unstable.js', 3, function() {
  console.log('Скрипт загружен');
});

8. Загрузка inline-скрипта (код в виде строки) и его выполнение

var code = 'window.hello = function() { console.log("Hello from inline"); }';
// Выполнение через скрытый script элемент
var script = document.createElement('script');
script.textContent = code;
document.head.appendChild(script);
// Теперь доступна функция window.hello
window.hello();

Результат:

Hello from inline