ran
日本語

scriptOnLoad

script や link のタグを動的に差し込み、すべての読み込みが終わるまで待ちます。

API

scriptOnLoad

戻り値

引数 説明 型
Promise<void> すべての読み込みが終わったときに解決される Promise Promise

パラメーター

パラメーター 説明 型 既定値
urls リソースの URL の配列 string[] 必須
append 差し込み先の親要素（任意） HTMLElement body
callback すべての読み込みが終わったときのコールバック（任意） Function 任意

使用例

基本的な使い方

import { scriptOnLoad } from 'ranuts';

// スクリプトをひとつ読み込む
await scriptOnLoad(['https://example.com/script.js']);
console.log('スクリプトを読み込みました');

複数のリソースを読み込む

import { scriptOnLoad } from 'ranuts';

// 複数のスクリプトとスタイルを同時に読み込む
await scriptOnLoad([
  'https://example.com/script1.js',
  'https://example.com/script2.js',
  'https://example.com/style.css',
]);
console.log('すべてのリソースを読み込みました');

コールバックを使う

import { scriptOnLoad } from 'ranuts';

scriptOnLoad(['https://example.com/library.js'], document.body, () => {
  console.log('読み込みが終わりました。使い始められます');
});

サードパーティのライブラリを動的に読み込む

import { scriptOnLoad } from 'ranuts';

async function loadLibrary() {
  await scriptOnLoad(['https://cdn.example.com/library.js']);
  // ライブラリを読み込んだので使えます
  window.Library.init();
}

補足

  1. 種類の自動判別：URL の末尾（.css）を見て、スタイルなのかスクリプトなのかを自動で見分けます。
  2. 並行して読み込む：すべてのリソースを並行して読み込み、全部が終わってから解決します。
  3. 差し込み先：既定では body 要素ですが、ほかの親要素も指定できます。
  4. Promise とコールバック：どちらにも対応しており、併用もできます。