Реализация предварительного загрузчика в элементе Processingjs Canvas - PullRequest
Новая
       23

Реализация предварительного загрузчика в элементе Processingjs Canvas

1 голос
/ 19 ноября 2010

Как реализовать предварительный загрузчик для элемента обрабатывающего холста?

Два случая - активы загружены, но JS все еще вычисляет / отображает представление;активы не загружены

PS Кто-то создал тег processingjs!Пользователи с rep lt 1500 не могут этого сделать :(

1 Ответ

0 голосов
/ 25 ноября 2010

Может быть, этот очень старый фрагмент поможет вам, после загрузки всех изображений вызывается обратный вызов. Параметр папки использовался для загрузки изображений с низким или высоким разрешением. 

pics = {
  'Trans100'    : "trans100.png",
  'Trans101'    : "trans101.png",
  'TransPanel'  : "transPanel.png"
}

function oAttrs(o) { var a, out = ""; for (a in o){ out += a + " ";} return trim(out);}

function imageLoader(pics, folder, onready){
  this.nextPic  = 0;
  this.pics     = pics;
  this.folder   = folder;
  this.names    = oAttrs(pics).split(" ");
  this.onReady  = onready;
  this.loadNext();
}

  imageLoader.prototype.loadNext = function (){
    if (this.nextPic === this.names.length) {
      this.onReady();
    } else {
      this.loadImage(this.pics[this.names[this.nextPic]]);
    }
  };

  imageLoader.prototype.loadImage = function (file){
    this.nextPic += 1;
    var pic       = new Image();
    pic.onload    = this.loadNext.bind(this);
    pic.onerror   = function(){console.error("ERROR: " + file);};
    pic.src       = this.folder + file;
  };


// example: 

new imageLoader(pics, "images", function(){
  console.log("Images loaded");
})
...