3) PreloadJs

Hier werden auch mehrere Bilder geladen. Ein Bild wird per id angesprochen und einem Bitmap Objekt zugewiesen. Das Bitmap Objekt wird im Canvas Element angezeigt.

Siehe preloadjs, getResult, man kann eine id angeben, wenn man keine vergeben hat, wie in der auskommentierten Zeile, kann man stattdessen auch den Pfad eingeben.
Siehe die auskommentierte Zeile: preloadManifest(["images/nase.jpg",....]);

var preload, stage, bitmap;
	
function init(){
stage = new createjs.Stage("myCanvas");		
}
	
function loadImage() {

 	preload = new createjs.LoadQueue(); 
	preload.on("fileload", handleFileComplete, this);
	//preload.loadManifest(["images/nase.jpg", "images/grab.jpg", "images/schafe.jpg"]);
	preload.loadManifest([{id:"nase", src: "images/nase.jpg"}, {id: "grab", src: "images/grab.jpg"}, {id:"schafe", src:"images/schafe.jpg"}]);
}
function handleFileComplete(event) {

var image = preload.getResult("grab", false);
	console.log(image);
	bitmap = new createjs.Bitmap(image); 
	stage.addChild(bitmap); 
	stage.update();	
}	

Im Body Bereich

<canvas id="myCanvas" width="500" height="250">sie benötigen einen Browser update</canvas>
<button onclick="loadImage();" >Load Image</button>

Beispiel 1 / Beispiel 2 / Beispiel 3 / Beispiel 4

Hauptseite