Bilder nacheinander laden

S

Supermuh

Grünschnabel
Hallo.
Ich erstelle gerade eine Seite, bei der zuerst Bilder in niedriger Auflösung vorhanden sind, und dann in richtiger Reihenfolge nachgeladen werden sollen.

Über img=new Image(); erstelle ich die Bilder. Mein Ansatz ist, dass ich mit img.onload prüfe, ob die Bilder fertig geladen sind. Das funktioniert aber nicht. Ich weiß nicht wieso, aber es geht nicht. Gibt es eine andere Möglichkeit festzustellen ob ein Bild fertig geladen ist?

Nochmal das Schema zum Verständnis:
<img src="klein_1">
<img src="klein_2">
<img src="klein_3">

Dann soll via js nacheinander erst groß_1 geladen werden, dann groß_2 usw... aber mit groß_2 soll erst angefangen werden wenn groß_1 fertig ist.

Jemand eine Idee?

Grüße
 
Moin,


Das sollte eigentlich gehen über onload:
Code: 
img=new Image();
img.onload=function(e){alert('fertsch');}
img.src='http://www.tutorials.de/forum/images_v6/misc/tuts_default.gif';

Ansonsten gibt es noch die Möglichkeit, Breite oder Höhe abzufragen...sind diese grösser als 0, ist davon auszugehen, dass das Bild geladen ist.
 
Hi,

auch wenn Sven mal wieder schneller war, will ich meinen Senf noch dazu geben ;)

Zum Nacheinanderladen der Grafiken:

Erstelle ein Array, das die Quellen der Bilder enthält. In einer Funktion (loadImg) wird ein Bildobjekt erstellt (new Image), die Quelle zugewiesen (.src = Quelle) und anschliessend der onload-Event der Grafik überwacht.

Innerhalb der onload-Routine der Grafik wird eine Zählvariabe zum Durchlaufen des Quellarrays inkrementiert und die Funktion (loadImg) erneut aufgerufen.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
var lngTS = new Date().getTime();
var arrSrc = new Array("bild1.gif",
								       "bild2.gif",
                       "bild3.gif");
var intC = 0;

window.onload = function(){
  loadImg();
}

function loadImg(){
  var objImg = new Image();
  objImg.src = arrSrc[intC];
  objImg.onload = function(){
  document.getElementById("outID").innerHTML += "<img src=\""+this.src+"\">";
    intC++;
    if(intC < arrSrc.length)
      loadImg();
  }
}
 //-->
</script>
</head>
<body>
<div id="outID"></div>
</body>
</html>
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
So dachte ich mir das auch. Allerdings funktioniert der onload-handler nicht wie gewünscht... probierts aus. Onload wird einfach direkt aufgerufen, ohne dass gewartet wird bis das bild geladen wurde :(
 
stark verkürzt:

Code: 
function bildwechsel() {
  alert("fertig geladen");
  aktiv=false;
  // bild.src in quelle ändern usw...
  ...
}

function vorladen() {
  aktiv=true;
  bild=new Image();
  quelle=blabla; // vorher def.
  bild.onload=bildwechsel();
  bild.src = quelle;
}

über das aktiv lass ich die der reihe nach ausgeben... (nicht in dem snippet oben drin)

kopiert euch den code: "fertig geladen" wird direkt ausgegen, nicht erst wenn die neue quelle geladen ist... :(

oder was mach ich falsch?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück