Ein Preloader macht eigentlich erst dann richtig Sinn, wenn die Bilder vorausgeladen werden und somit zur Verfügung stehen, wenn Sie gebraucht werden. Hier habe ich das Script der vorigen Seite etwas abgeändert.
Der Unterschied liegt darin, dass die Bilder nicht erst geladen werden, wenn man auf den Button klickt, sondern schon beim Start der Seite innerhalb der init() Funktion welche im Body Element aufgerufen wird.
<body onload="init();">
Der ClickEvent auf den Button wird innerhalb der handleFileComplete() Funktion eingefügt, also dann wenn der Ladevorgang der Bilder abgeschlossen ist.
Außerdem habe ich noch einen Progress Event hinzugefügt, welcher den Ladevorgang überwacht.
var preload, stage, bitmap;
function init(){
stage = new createjs.Stage("myCanvas");
}
preload = new createjs.LoadQueue();
preload.on("fileload", handleFileComplete, this);
preload.on("fileprogress", handleProgress, this);
preload.loadManifest([{id:"nase", src: "images/nase.jpg"}, {id: "grab", src: "images/grab.jpg"}, {id:"schafe", src:"images/schafe.jpg"}]);
function handleFileComplete() {
document.getElementById("myButton").addEventListener("click", addImage);
}
function addImage(){
var image = preload.getResult("grab", false);
console.log(image);
bitmap = new createjs.Bitmap(image);
stage.addChild(bitmap);
stage.update();
}
function handleProgress(evt) {
var prozent = Math.round(evt.progress * 100);
console.log(prozent);
document.getElementById("info").innerHTML = prozent + " % geladen";
}
}
Beispiel 1 / Beispiel 2 / Beispiel 3 / Beispiel 4