Problem mit dynamischer Bildvorschau

  • Hey Leute!
    Dieser Threat ist eher an die Webdesigner und Programmierer gerichtet:


    Und zwar hab ich seit einiger Zeit ein mittelgroßes Problem mit der dynamischen Bildvorschau für mein Webinterface, an dem ich seit fast einem Jahr schraube (ist schon fertig und bereits bei einem "Kunden" in Betrieb). Das Problem ist, dass das Bild beim ersten Ausführen des Scriptes nicht angezeigt wird, danach aber alles perfekt funzt. Zudem bekommt es der allseits beliebte Internet Explorer nicht auf die Reihe die URL zu ändern, wenn auf ein anderes Bild geklickt wird. Hier der Code:


    Seid bitte nicht zu streng mit mir, ich hab mir alles, was ich kann selbst beigebracht und habe bisher keine richtige Ausbildung in diesem Bereich genossen ;)
    Hier die Seite mit dem entsprechenden Script: http://beta.just-different-design.de/


    Was auf der Seite zu sehen ist, wollte ich natürlich eigentlich nicht zeigen, daher fragt bitte garnicht erst und bitte keinen dummen Comments über irgendwelche Texte. Zudem sind die Unterseiten noch nicht verlinkt. Achso und optimiert ist auch nur für Firefox und ja, ich weiß, dass JQuery und JavaScript gemischt sind, obwohl es meist für die jeweilige Sprache eine Funktion gibt, aber ich habs halt so gemacht ;)

  • Hätte es nicht PHP sein können? Ich hasse Javascript *hust* Aber ich schau nachher mal im Detail drüber, falls bis dahin noch keiner die Lösung hat.


    Spontan fällt mir aber auf, dass es keine Funktion openImage() gibt, die aufgerufen werden soll, wenn man auf "try again" klickt. Das sorgt beim Anklicken für nen Fehler.


    Warum das beim ersten Ausführen nicht klappt schau ich nachher dann im Detail.

  • Ok, konnte mich grad dann mal etwas damit beschäftigen. Sorry, kam bis jetzt immer was dazwischen ^^


    Also dein Problem ist, dass es nach...


    JavaScript
    1. pictureViewed = new Image(900, 500);
    2. pictureViewed.src = "http://beta.just-different-design.de/interface/php/backstage/php/img/upload/"+path+"";


    ... etwas dauert, bis das Bild tatsächlich geladen wurde. Du willst allerdings direkt damit weiter arbeiten, obwohl es noch nicht fertig geladen ist. Dadurch kommt es zu dem Fehler und deshalb funktioniert es beim zweiten Aufruf dann auch. Einfach weil das Bild in der Zwischenzeit fertig geladen ist.


    Mit pictureViewed.complete kannst du z.B. testen, ob das Bild bereits geladen wurde (true) oder eben nicht (false).


    Vielleicht hilft dir das ja schon weiter ;)



    Edit:
    Lösen kannst du es sonst z.B. so:


    JavaScript
    1. pictureViewed = new Image(900, 500);
    2. pictureViewed.src = "http://beta.just-different-design.de/interface/php/backstage/php/img/upload/"+path+"";
    3. pictureViewed.onload = function(){
    4. /* dein code */
    5. }


    Dann wird der Code ausgeführt, wenn das Bild geladen wurde.

  • Okay, danke erstmal dafür, könnt mich grad wieder aufregen, dass ich da nicht selbst dran gedacht hab ;) Hat gefunzt! Ich bin begeistert ^^


    Hat nur so lang in der Umsetzung meinerseits gedauert, da ich mir bei dem Versuch es auf eigene Faust zu lösen erstmal den ganzen Code zerhackt hab... :(


    Nur das Problem mit dem IE besteht weiterhin. Liegt das an mir, oder wiedermal am IE, der den Code nicht vollständig umsetzen kann?

  • Also der Pfad wird beim IE korrekt übernommen und geändert. Grad mal geschaut und ausgeben lassen. Nur das Bild ändert sich halt nicht. Hab grad beim Überfliegen einiger Google Ergebnisse was davon gelesen, dass der IE das Bild wohl cached und deshalb nicht aktualisiert. Wie man dem IE jetzt beibringt, dass er das Bild neu laden soll, müsste ich aber auch erst googlen.