MediaPreloader.js

export default class MediaPreloader {
  /**
   * @param {String[]|String} media sources
   * @returns {MediaPreloader} instance
   */
  constructor(sources) {
    this._sources = Array.isArray(sources) ? sources : [sources];
  }
  /**
   * @param {Function} after loaded callback
   * @returns {Promise}
   */
  load(progress) {
    return Promise.all(
      this._sources.map(src => (
        this._imageRegex.test(src) && this._loadImage(src, progress) ||
        this._videoRegex.test(src) && this._loadVideo(src, progress) || Promise.reject(src)
      ))
    );
  }
  _loadImage(src, progress) {
    return new Promise((resolve, reject) => {
      const image = new Image();
      image.addEventListener('load', this._createFinalResolve(resolve, progress));
      image.addEventListener('error', reject);
      image.src = src;
    });
  }
  _loadVideo(src, progress) {
    return new Promise((resolve, reject) => {
      const video = document.createElement('video');
      video.addEventListener('loadeddata', this._createFinalResolve(resolve, progress));
      video.addEventListener('error', reject);
      video.src = src;
      video.load();
    });
  }
  _createFinalResolve(resolve, progress) {
    return typeof progress === 'function' ? (...args) => {
      progress(...args);
      resolve(...args);
    } : resolve;
  }
  get _imageRegex() {
    return /.+\.(png|jpe?g|gif)$/;
  }
  get _videoRegex() {
    return /.+\.(mp4|webm)$/;
  }
}

// Usage

import MediaPreloader from './MediaPreloader';

const preloader = new MediaPreloader(['../images/example00.png', '../images/example01.jpg', '../images/example02.mp4']);
preloader
  .load(ev => console.log(`${ev.target} loaded !!!`))
  .then(events => console.info('All loaded !!!', events))
  .catch(errors => console.log(`Unkown errors ${errors}`));