Implémentation d'un préchargeur dans l'élément Canevas Processingjs

Question

Comment implémenter un préchargeur pour un élément canvas de traitementjs?

Deux cas - les ressources ont été chargées, mais je continue à calculer/restituer la vue; les actifs n'ont pas été chargés

P.S. Quelqu'un crée le tag processingjs! Les utilisateurs avec rep lt 1500 ne peut pas le faire encore :(

Answer 1

Peut être ce très ancien extrait vous aide, après le chargement de toutes les images d'un rappel est appelé. Le dossier a été param utilisé pour charger les photos bas ou HighRes.

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"); 
})