在Processingjs畫布元素中實現預加載器元素

Question

如何爲processingjs畫布元素實現預加載器？

兩種情況 - 資產已加載，但js仍在計算/呈現視圖;資產尚未加載

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