Bilder dynamisch wechseln - Probelm mit IE
Guido
- javascript
Hallo Forum,
ich habe mir mit meinen (wenigen!) Java-Kentnissen und verschiedenen Quelltexten eine dynamische Seite für die Erzeugung von Mitgliederdetails eines Vereins geschrieben um bei einer Layoutänderung die Seiten schneller anpassen zu können. Im Prinzip eine Minidatenbank die immer auf die gleiche Seite zugreifen soll. Eine Serverseitige Sprache kann ich leider nicht verwenden, da ich die HP auf offline auf CD funktionsfähig haben möchte.
Die besagte Seite ist unter:
http://www.bsg-olfen.de/web/mitglieder.htm?1
online.
Im Firefox, bzw. Mozilla funktioniert sie Seite so wie ich will. Die Bilder sollen passend zu den Namen geladen werden. Falls noch kein Bild vorhanden (auf dem Server) ist soll die Seite stattdessen das Bild "leer.jpg" anzeigen.
In der Fkt. setdata () habe ich versucht anhand der Breite des Bildes (width==true --> Bild vorhanden) entweder auf das Bild der passenden ID - oder wenn nicht vorhanden - auf das "leer.jpg" (Array 0 --> bildervz + Daten[0]["m_bild"] +".jpg") zu verzweigen.
Im Firefox funktioniert das toll, nur im IE nicht. Der IE zeigt grundsätzlich das leere Bild - und zeigt die vorhandenen Bilder erst nach aktualisierung der Seite an. Der Eintrag wo kein Bild vorhanden ist (id = 3) läd nach aktualisierung dann nicht das leer.jpg - sondern gar keins :-(
Hat jemand eine Idee wie ich das hinbekommen könnte?
kann man da eventuell ein timeout mit einbauen das nur das Bild nochmal aktualisiert wird wenn der IE alles geladen hat?
Und warum zeigt der IE beim dritten Bild (id=3) nach aktualisierung nicht das leer.jpg an?
Oder ist mein Ansatz komplett Falsch?
Hilfäääää!
Gruß Guido
Hier der Quelltext:
<script language="JavaScript">
//Array fuer Datencontainer definieren
var Daten = new Array();
//Daten in das Array schreiben
function addData (m_name,m_bild,funktion,eintritt,tel,fax,mail,web,weiteres)
{
Daten[Daten.length] = new Object();
Daten[Daten.length - 1]["m_name"] = m_name;
Daten[Daten.length - 1]["m_bild"] = m_bild;
Daten[Daten.length - 1]["funktion"] = funktion;
Daten[Daten.length - 1]["eintritt"] = eintritt;
Daten[Daten.length - 1]["tel"] = tel;
Daten[Daten.length - 1]["fax"] = fax;
Daten[Daten.length - 1]["mail"] = mail;
Daten[Daten.length - 1]["web"] = web;
Daten[Daten.length - 1]["weiteres"] = weiteres;
}
//Endung hinter der URL abc.htm?xxx
var anhang;
//Anhang von der URL trennen
function extAnhang()
{
var URLInhalt = location.href;
var ArrayVariable = URLInhalt.split("?");
anhang = unescape(ArrayVariable[1]);
//Anhang in eine IntagerZahl umwandeln
id = parseInt(anhang);
//Prüfe ob Zahl vorhanden ansonsten setze Zahl auf NULL
if (!id) id = 1;
}
//Funktion ausführen
extAnhang();
//Setze Bilderverzeichnis
var bildervz = "images/mitglieder/";
//Datencontainer füttern
addData ("m_name","leer","funktion","eintritt","tel","fax","mail","web","weiteres");
addData ("Albert Böcker","albertboecker","1. Vorsitzender","1988","02595 838","","albert_boecker at yahoo dot de","http://www.bsg-olfen.de","Thronoffizier");
addData ("Christoph Krursel","christophkrursel","2. Vorsitzender","1990","","","","http://www.bsg-olfen.de","");
addData ("Josef Kaltwasser","josefkaltwasser","1. Geschäftsführer","1990","","","","http://www.bsg-olfen.de","");
addData ("Beate Hatebur","beatehatebur","2.Geschäftsführerin","1990","","","","http://www.bsg-olfen.de","Abteilungsleiterin der Damenabteilung");
addData ("Josef Hatebur","josefhatebur","1. Kassierer","1977","02595 3564","","","http://www.bsg-olfen.de","");
addData ("Everhard Maikoetter","everhardmaikoetter","2. Kassierer","1990","02595 98419","","","http://www.bsg-olfen.de","");
//addData ("Guido Schlüter","guidoschlueter","Webmaster","1990","02595 972818","02595 972819","webmnaster@bsg-olfen.de","http://www.xodiug.de","");
//Anzahl der Einträge bestimmen
function anz ()
{
var anz = 0;
for (i = 0; i < Daten.length; i++)
anz++;
return anz-1;
}
//Setze Array auf id=0 wenn Anzahl überschritten wird
if (id > anz()) id = 1;
//Lade Bild vorab, wenn breite = 0 ist das Bild nicht vorhanden
//und wird in der setdata() durch das Bild 0 ersetzt
var pic = new Image();
pic.src = bildervz + Daten[id]["m_bild"] + ".jpg?"+ Math.random();
//Daten für späteren Gebrauch definieren
function setdata (){
document.getElementById ("m_name").firstChild.data = Daten[id]["m_name"];
//Entscheidung ob Bild vorhanden ist oder nicht
if(!pic.width == true)
{
document.getElementById ( "m_bild" ).src = bildervz + Daten[0]["m_bild"] +".jpg";
}
else {
document.getElementById ( "m_bild" ).src = bildervz + Daten[id]["m_bild"] +".jpg";
}
//Restliche Daten definieren
document.getElementById ("funktion").firstChild.data = Daten[id]["funktion"];
document.getElementById ("eintritt").firstChild.data = Daten[id]["eintritt"];
document.getElementById ("tel").firstChild.data = Daten[id]["tel"];
document.getElementById ("fax").firstChild.data = Daten[id]["fax"];
document.getElementById ("mail").firstChild.data = Daten[id]["mail"];
document.getElementById ("web").firstChild.data = Daten[id]["web"];
document.getElementById ("weiteres").firstChild.data = Daten[id]["weiteres"];
}
function weiter(){
id += 1;
self.location.href = "mitglieder.htm?" + id;
}
</script>
<body onload="setdata ()">
!pic.width == true
Ähm. Das verstehe ich nicht ganz. das == true kannst du eigentlich weg lassen.
Es soll ja folgendermaßen nachfragen, oder?
Wenn pic.width nicht true
Das ! fragt ja nach, wenn es entweder nicht vorhanden ist oder false ist. vielleicht liegt es ja daran.
so könnte es funktionieren:
if(!pic.width)
...
MFG
Griever
!pic.width == true
Ähm. Das verstehe ich nicht ganz. das == true kannst du eigentlich weg lassen.
ok, hab ich, bzw, hatte ich schon probiert - der Teil ist klar...
so könnte es funktionieren:
if(!pic.width)
Das Problem besteht allerdings weiterhin :-(
Oflline klappt es manchmal - da die Ladezeiten geringer sind. Ist das ganze allerdings auf einem Server hauts wieder nicht hin.
Weiteres Problem ist, dass der IE bei !pic.width ein true hraus gibt, da dieser dann einen platzhalter für die nicht vorhandene Grafik erstellt - und dieser eine Breite von (glaub) 30pxl hat. diese 30pxl nimmt er dann als width für die Grafik, die eigentlich gar nicht da ist.
Habe es schon bis etwas wie if(pic.width > 100).... probiert - ist aber auch nicht 100% zuverlässig...
Am schönsten wäre, wenn er erst die komplette Seite läd, und dann die ggf. vorhandenen Bilder austauscht... gibts da noch eine Möglichkeit???
Greetz Guido