# Bilder nacheinander laden



## Supermuh (13. August 2008)

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


----------



## Sven Mintel (13. August 2008)

Moin,


Das sollte eigentlich gehen über onload:

```
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.


----------



## Quaese (13. August 2008)

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:

```
<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


----------



## Supermuh (13. August 2008)

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


----------



## Sven Mintel (13. August 2008)

Zeige doch mal deinen Code...bei meinem Beispiel feuert onload erst, wenn das Bild geladen wurde.


----------



## Supermuh (13. August 2008)

stark verkürzt:


```
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?


----------



## Sven Mintel (13. August 2008)

Da brauch ich nichts kopieren 


```
bild.onload=bildwechsel();
```

Entferne dort mal die Klammern


----------

