Processingjsキャンバス要素のプリローダーの実装

Question

processingjsキャンバス要素のプリローダーを実装するにはどうすればよいですか？

2つのケース - アセットが読み込まれていますが、まだビューが計算/レンダリングされています。資産がロードされていません。

P.S.誰かがprocessingjsタグを作成します！担当者LT 1500を持つユーザーはまだ:(

Answer 1

は、この非常に古いスニペットことができることを行うことはできませんが、コールバックが呼び出されたすべての画像をロードした後、あなたを助けます。フォルダのparamが低いか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"); 
})