1
Image laden, nur wenn noch nicht geladen
Abend,
Bräuchte mal einen kleinen Denkanstoß. Stehe etwas auf dem Schlauch.
Ich versuche mich gerade in canvas einzuarbeiten, und würde da gerne eine function schreiben, die dann die Images lädt, aufpasst, das diese auch wirklich geladen werden, nur lädt wenn noch nicht geladen, und anschließend verwaltet.
Hab da bereits was geschrieben (ich habe inzwischen gemerkt, das das mit dem onload an dieser stelle quatsch ist, ich lasse es aber mal noch drin, weil so in etwa wollte ich es umsetzen.
Wie könnte ich dies umsetzen, sodass das mit Bild bereits in Array funktioniert, auch wenn 2 mal das gleiche Bild hintereinander geladen wird, also das laden des ersten noch nicht abgeschlossen?
Wie könnte ich denn Rückgabe wert bestimmen?
Dachte an eine Warteschlange, aber ich komme gerade nicht drauf, wie ich da ansetzen könnte.
Danke schon mal für eine Antwort
Mfg
Power-Poler
Bräuchte mal einen kleinen Denkanstoß. Stehe etwas auf dem Schlauch.
Ich versuche mich gerade in canvas einzuarbeiten, und würde da gerne eine function schreiben, die dann die Images lädt, aufpasst, das diese auch wirklich geladen werden, nur lädt wenn noch nicht geladen, und anschließend verwaltet.
Hab da bereits was geschrieben (ich habe inzwischen gemerkt, das das mit dem onload an dieser stelle quatsch ist, ich lasse es aber mal noch drin, weil so in etwa wollte ich es umsetzen.
var imgarray = new Array();
function loadimg(src){
var pos;
if((pos = imgisload(src)) || pos === 0 ) {console.log(pos); return pos;} // Liefert die Position im Array wenn vorhanden
else{
var temp = document.createElement('img'); //erzeugt das Bild, wenn nicht vorhanden
temp.src=src; //lädt das Bild (sollte)
}
temp.onload = function(){ //Wenn das Bild erfolgreich geladen wurde (ja an dieser stelle Käse)
imgarray.push(temp);
console.log(imgarray[imgarray.length-1]);
return imgarray.length-1;
}
temp.onerror = function(){ ((Falls das Bild doch nicht geladen werden konnte
console.log("ERROR onLoad");
return false;
}
}
function imgisload(imgsearch){ //Überprüft ob das Bild bereits im Array ist.
for(var i = 0; i<imgarray.length; i++){
if(imgarray[i].outerHTML.indexOf(imgsearch) != -1){ console.log(i);return i;}
}
return false;
}
console.log(loadimg("Images/Wald.gif")); //return undefined (logisch)
window.setTimeout(function (){console.log(loadimg("Images/Wald.gif"))}, 1000); //return 0, da Bild bereits im Array an position 0
console.log(loadimg("Images/Wald2.gif")); //return undedined (Wald2 nicht existent, zum Test des onerror) Wie könnte ich denn Rückgabe wert bestimmen?
Dachte an eine Warteschlange, aber ich komme gerade nicht drauf, wie ich da ansetzen könnte.
Danke schon mal für eine Antwort
Mfg
Power-Poler
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 329792
Url: https://administrator.de/contentid/329792
Printed on: April 23, 2024 at 15:04 o'clock
1 Comment
var imgarray = new Array();
function loadimg(src){
var pos;
if((pos = imgisload(src)) || pos === 0 ) {return imgarray[pos];}
else{
var temp = document.createElement('img');
temp.alt = src;
temp.src = src;
imgarray.push(temp);
temp.onload = function(){
imgarray[imgisload(src)].error = false;
};
temp.onerror = function(){
imgarray[imgisload(src)].error = true;
};
return imgarray[imgarray.length -1];
}
}
function imgisload(imgsearch){
for(var i = 0; i<imgarray.length; i++){
if(imgarray[i].alt == imgsearch) return i;
}
return false;
}Hätte es ja gerne über "complete" gemacht, nur der Firefox hat hier die großartige Angewohnheit true zurück zu liefern, egal was mit dem Bild ist...
