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
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 329792
Url: https://administrator.de/forum/image-laden-nur-wenn-noch-nicht-geladen-329792.html
Ausgedruckt am: 19.02.2025 um 22:02 Uhr
1 Kommentar
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...
