assets loader

images


  var images = [];
  for (var i = 0; i < 50; i++) {
      images.push({
          url: 'http://lorempixel.com/100/100?' + i,
          type: 'jpg'
      });
  }
  var loader = assetsLoader({
          assets: images
      })
      .on('error', function(error) {
          container.innerHTML = error;
      })
      .on('progress', function(progress) {
          container.innerHTML = (progress * 100).toFixed() + '%';
      })
      .on('complete', function(assets) {
          container.innerHTML = '';
          assets.forEach(function(asset) {
              container.appendChild(asset.file);
          })
      })
      .start();

video


  var loader = assetsLoader({ log: true })
      .add({
          id: 'video',
          url: 'https://ianmcgregor.co/prototypes/video/counter.webm',
          blob: true
      })
      .on('error', function(error) {
          container.innerHTML = error;
      })
      .on('progress', function(progress) {
          container.innerHTML = (progress * 100).toFixed() + '%';
      })
      .on('complete', function() {
          container.innerHTML = '';
          var src = this.get('video');
          if (window.Blob && src instanceof window.Blob) {
              src = window.URL.createObjectURL(src);
              el = document.createElement('video');
              var revoke = function() {
                  el.removeEventListener('canplaythrough', revoke);
                  window.URL.revokeObjectURL(src);
              };
              el.addEventListener('canplaythrough', revoke);
              el.preload = 'auto';
              el.src = src;
              el.load();
          } else {
              el = src
          }
          el.controls = 'controls';
          container.appendChild(el);
      })
      .start();

groups

group a

group b


    var loader = assetsLoader()
        .add({
            id: 'groupA',
            assets: images
        })
        .add({
            id: 'groupB',
            basePath: 'https://ianmcgregor.co/prototypes/audio/',
            assets: sounds
        })
        .on('error', function(error) {
            container.innerHTML = error;
        })
        .on('childcomplete', function(asset) {
            console.debug('childcomplete', asset.id);
        })
        .on('complete', function(assets) {
            assets.forEach(function(asset) {
                console.debug(asset.id);
                asset.file.forEach(function(file) {
                    console.debug(' - ' + file.id);
                });
            });

            containerImages.innerHTML = '';
            containerAudio.innerHTML = '';

            loader.get('groupA')
                .forEach(function(asset) {
                    asset.file.alt = asset.id;
                    containerImages.appendChild(asset.file);
                });

            loader.get('groupB')
                .forEach(function(asset) {
                    asset.file.controls = 'controls';
                    containerAudio.appendChild(asset.file);
                });
        });


    loader.getLoader('groupA')
        .on('progress', function(progress) {
            containerImages.innerHTML = (progress * 100).toFixed() + '%';
        });

    loader.getLoader('groupB')
        .on('progress', function(progress) {
            containerAudio.innerHTML = (progress * 100).toFixed() + '%';
        });

    loader.start();