Skip to content

Instantly share code, notes, and snippets.

@ykob

ykob/preloader.js

Last active June 12, 2016 17:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ykob/33c6c917e0cdd9c1895a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ykob/33c6c917e0cdd9c1895a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ykob revised this gist May 27, 2016. 1 changed file with 20 additions and 42 deletions.
    62 changes: 20 additions & 42 deletions preloader.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,73 +1,51 @@
    export default class Preloader {
    constructor(json, callback) {
    this.file_list = json;
    constructor() {
    this.data = null;
    this.$preloader = $('.c-preloader');
    this.$sequencer_ov = $('.c-preloader__sequencer-over');
    this.$sequencer_bg = $('.c-preloader__sequencer-bg');
    this.callbackLoadedData = null;
    this.callbackLoadedDataAll = null;
    this.count_loaded = 0;
    this.callback = callback;

    this.loadJSON();
    this.complete = false;
    }
    loadJSON() {
    $.ajax({
    url: this.file_list,
    type: 'GET',
    dataType: 'json'
    })
    .done((data) => {
    this.data = data;
    this.preload();
    })
    .fail(() => {
    alert("error load filelist json.");
    });
    }
    preload() {
    start(data, callbackLoadedData, callbackLoadedDataAll) {
    if (!data.isArray) return;
    this.data = data;
    this.callbackLoadedData = callbackLoadedData;
    this.callbackLoadedDataAll = callbackLoadedDataAll;
    const reg = /(.*)(?:\.([^.]+$))/;
    for (var i = 0; i < this.data.length; i++) {
    const data = this.data[i];
    switch (data.match(reg)[2]) {
    case 'png':
    case 'jpg':
    case 'gif':
    const image = new Image();
    image.onload = () => {
    this.loadedData(data);
    this.loadedData();
    };
    image.src = data;
    break;
    case 'mp4':
    const video = document.createElement('video');
    video.addEventListener('loadeddata', () => {
    this.loadedData();
    });
    video.src = data;
    video.load();
    video.addEventListener('loadeddata', () => {
    this.loadedData(data);
    }, false);
    console.log(video);
    break;
    default:
    this.loadedData();
    }
    }
    }
    loadedData(data) {
    loadedData() {
    this.count_loaded++;
    this.$sequencer_ov.css({
    width: `${this.count_loaded / this.data.length * 100}%`
    });
    this.$sequencer_bg.css({
    width: `${100 - (this.count_loaded / this.data.length * 100)}%`
    });
    if (this.callbackLoadedData) this.callbackLoadedData();
    if (this.count_loaded >= this.data.length) {
    this.loadedDataAll();
    }
    }
    loadedDataAll() {
    setTimeout(() => {
    this.$preloader.addClass('is-loaded');
    setTimeout(() => {
    $('.l-page').addClass('is-loaded');
    this.callback();
    }, 500);
    }, 500);
    this.complete = true;
    if (this.callbackLoadedDataAll) this.callbackLoadedDataAll();
    }
    }
  2. ykob created this gist Mar 15, 2016.
    73 changes: 73 additions & 0 deletions preloader.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,73 @@
    export default class Preloader {
    constructor(json, callback) {
    this.file_list = json;
    this.data = null;
    this.$preloader = $('.c-preloader');
    this.$sequencer_ov = $('.c-preloader__sequencer-over');
    this.$sequencer_bg = $('.c-preloader__sequencer-bg');
    this.count_loaded = 0;
    this.callback = callback;

    this.loadJSON();
    }
    loadJSON() {
    $.ajax({
    url: this.file_list,
    type: 'GET',
    dataType: 'json'
    })
    .done((data) => {
    this.data = data;
    this.preload();
    })
    .fail(() => {
    alert("error load filelist json.");
    });
    }
    preload() {
    const reg = /(.*)(?:\.([^.]+$))/;
    for (var i = 0; i < this.data.length; i++) {
    const data = this.data[i];
    switch (data.match(reg)[2]) {
    case 'png':
    const image = new Image();
    image.onload = () => {
    this.loadedData(data);
    };
    image.src = data;
    break;
    case 'mp4':
    const video = document.createElement('video');
    video.src = data;
    video.load();
    video.addEventListener('loadeddata', () => {
    this.loadedData(data);
    }, false);
    console.log(video);
    break;
    default:
    }
    }
    }
    loadedData(data) {
    this.count_loaded++;
    this.$sequencer_ov.css({
    width: `${this.count_loaded / this.data.length * 100}%`
    });
    this.$sequencer_bg.css({
    width: `${100 - (this.count_loaded / this.data.length * 100)}%`
    });
    if (this.count_loaded >= this.data.length) {
    this.loadedDataAll();
    }
    }
    loadedDataAll() {
    setTimeout(() => {
    this.$preloader.addClass('is-loaded');
    setTimeout(() => {
    $('.l-page').addClass('is-loaded');
    this.callback();
    }, 500);
    }, 500);
    }
    }