loader_01

// =====================================================================================
//
// loading_01
//  - このファイルを「src/js/components」に移動の上、呼び出してください
//  - 呼び出しの際、引数でRoots名を指定してください
//    - 必要に応じて、第二引数に読み込み完了後のコールバック関数を、第三引数に読み込みに追加したい画像パスの配列を指定してください
//  - 記述例：
//      import loader_01 from './components/loader_01';
//      loader_01('loading', e => { console.log(e) }, ['images.png']);
//
// =====================================================================================

import $ from 'jquery';
import ImageLoader from '@/js/classes/ImageLoader';

export default function (rootsName, callback = () => {}, images = []) {
  let windowLoaded = false;
  let progress = 0;
  let loadProgress = 0;

  let $loading;
  let $bar;
  let $percent;

  const event = {
    BEFORE_REMOVE: 'beforeRemove',
    AFTER_REMOVE: 'afterRemove',
  };

  $(window).on('load.loading', () => {
    windowLoaded = true;
  });

  // DOM Ready
  $(() => {
    $loading = $('.' + rootsName);
    $bar = $('.' + rootsName + '--progress_bar');
    $percent = $('.' + rootsName + '--percent_num');

    if ($loading.length === 0) {
      return;
    }

    const imageLoader = new ImageLoader();
    imageLoader.addEventListener(ImageLoader.event.PROGRESS, onLoadProgress);
    imageLoader.addEventListener(ImageLoader.event.COMPLETE, onLoadComplete);

    const imgList = document.images;
    for (const img of imgList) {
      imageLoader.addFile(img.src);
    }
    imageLoader.addFileList(images);

    imageLoader.start();

    window.requestAnimationFrame(onTick);
  });

  // ロード画面撤収処理
  function remove() {
    callback({
      type: event.BEFORE_REMOVE,
    });

    $loading
      .on('animationend', function () {
        $loading.remove();
        callback({
          type: event.AFTER_REMOVE,
        });
      })
      .addClass('loader_01-remove_anim');
  }

  // 毎フレーム処理。瞬間的にロードが完了してもアニメーションはさせる
  function onTick() {
    if (progress >= loadProgress) {
      progress = loadProgress;
    } else {
      progress += 3;
    }

    $bar.css({
      transform: 'scaleX(' + Math.min(progress / 100, 1) + ')',
    });

    $percent.text(Math.min(progress, 100));

    // 一応、windowのロード完了は待つ
    if (progress >= 100 && windowLoaded) {
      window.cancelAnimationFrame(onTick);
      remove();
    } else {
      window.requestAnimationFrame(onTick);
    }
  }

  // 画像の読み込みが１個完了するごとの処理。進捗（%）を更新
  function onLoadProgress(e) {
    loadProgress = e.percent;
  }

  // 画像読み込み完了後の処理。一応、進捗100%にしておく
  function onLoadComplete(e) {
    loadProgress = 100;
  }
}