[英]Implementing a Preloader in Processingjs Canvas element
How do you implement a preloader for a processingjs canvas element? 如何为processingjs canvas元素实现预加载器?
Two cases - assets have loaded, but js still calculating/rendering the view; 两种情况-资源已加载,但js仍在计算/渲染视图; assets have not loaded 资产尚未加载
PS Someone create the processingjs tag! PS有人创建了processingjs标签! Users with rep lt 1500 can't do that yet :( 代表lt 1500的用户还不能做到这一点:(
May be this very old snippet helps you, after loading all images a callback is called. 加载所有图像后,可能会使用这个非常古老的代码段来帮助您。 The folder param was used to load low or highres pics. 文件夹参数用于加载低图片或高图片。
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");
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.