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({
          log: true,
          assets: images
      })
      .on('error', function(error) {
          container.innerHTML = error;
      })
      .on('progress', function(progress) {
          container.innerHTML = (progress * 100).toFixed() + '%';
      })
      .on('complete', function(map) {
          console.log(map);
          container.innerHTML = '';
          loader.get().forEach(function(image) {
              container.appendChild(image);
          })
      })
      .start();

video


  var container = document.querySelector('[data-js="container-video"]');
  var loader = assetsLoader({ log: true })
      .add({
          id: 'video',
          url: 'https://dl.dropboxusercontent.com/u/15470024/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(map) {
          console.log(map);
          container.innerHTML = '';
          var el = document.createElement('video');
          container.appendChild(el);
          // var url = files[0];
          var url = map.video;
          if (window.Blob && url instanceof window.Blob) {
              url = window.URL.createObjectURL(url);
              var revoke = function() {
                  el.removeEventListener('canplaythrough', revoke);
                  window.URL.revokeObjectURL(url);
              };
              el.addEventListener('canplaythrough', revoke);
          }
          el.preload = 'auto';
          el.controls = 'controls';
          el.src = url;
          el.load();
      })
      .start();

groups

group a

group b


    var images = [];
    for (var i = 0; i < 4; i++) {
        images.push({
            id: ('image' + i),
            url: 'http://lorempixel.com/200/200?' + i,
            type: 'jpg'
        });
    }
    var loader = assetsLoader()
        .add({
            id: 'groupA',
            assets: images
        })
        .add({
            id: 'groupB',
            assets: [{
                id: 'select',
                url: 'https://dl.dropboxusercontent.com/u/15470024/prototypes/audio/select.ogg'
            },{
                id: 'collect',
                url: 'https://dl.dropboxusercontent.com/u/15470024/prototypes/audio/collect.ogg'
            },{
                id: 'hit',
                url: 'https://dl.dropboxusercontent.com/u/15470024/prototypes/audio/hit.ogg'
            }]
        })
        .on('error', function(error) {
            container.innerHTML = error;
        })
        .on('complete', function(map) {
            console.log(map);
            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);
                });

        })
        .start();

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

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