scriptOnLoad

Fügt script- oder link-Tags zur Laufzeit ein und wartet, bis alle Ressourcen geladen sind.

API

scriptOnLoad

Rückgabe

Argument Beschreibung Typ
Promise<void> Promise, das erfüllt wird, sobald alle Ressourcen geladen sind Promise

Parameter

Parameter Beschreibung Typ Standard
urls Array mit den URLs der Ressourcen string[] Erforderlich
append Elternelement, in das eingefügt wird (optional) HTMLElement body
callback Callback, wenn alles geladen ist (optional) Function Optional

Beispiel

Grundlegende Verwendung

import { scriptOnLoad } from 'ranuts';

// Ein einzelnes Skript laden
await scriptOnLoad(['https://example.com/script.js']);
console.log('Skript geladen');

Mehrere Ressourcen laden

import { scriptOnLoad } from 'ranuts';

// Mehrere Skripte und Stylesheets gleichzeitig laden
await scriptOnLoad([
  'https://example.com/script1.js',
  'https://example.com/script2.js',
  'https://example.com/style.css',
]);
console.log('Alle Ressourcen geladen');

Einen Callback verwenden

import { scriptOnLoad } from 'ranuts';

scriptOnLoad(['https://example.com/library.js'], document.body, () => {
  console.log('Ressourcen geladen, es kann losgehen');
});

Eine fremde Bibliothek zur Laufzeit laden

import { scriptOnLoad } from 'ranuts';

async function loadLibrary() {
  await scriptOnLoad(['https://cdn.example.com/library.js']);
  // Die Bibliothek ist geladen und einsatzbereit
  window.Library.init();
}

Hinweise

  1. Erkennt den Typ selbst: An der Endung der URL (.css) unterscheidet es Stylesheet und Skript.
  2. Lädt parallel: Alle Ressourcen laden gleichzeitig; erfüllt wird erst, wenn alle fertig sind.
  3. Einfügeort: standardmäßig das body-Element, ein anderes Elternelement ist möglich.
  4. Promise und Callback: beides wird unterstützt und lässt sich kombinieren.