Webpage lädt dauerhaft nach implementierung von JS

  • Hallo Zusammen


    Ich bin seit einiger Zeit neu in das Programmieren mit JavaScript eingestiegen und stehe nun an meinem ersten Problem an:


    Auf meiner Website habe ich ein Bild, welches ich auf Basis eines Textes, der aus der Datenbank ausgelesen wird ändere. (Bsp: Input-Text: Team 1 -> Bild wird zu Team_1.png gewechselt usw.)

    Hierfür habe ich folgendes JavaScript geschrieben:

    JavaScript
    1. function loadLogo(img) {    var dynamic = document.getElementById("dynamicText").innerText;
    2.     switch (dynamicText) {        case "Team 1": img.src = "img/team-logo/team_1.png";        break;
    3.         case "Team 2": img.src = "img/team-logo/team_2.png";        break;
    4.         default: img.src = "img/team-logo/logo_tbd.png";        break;    }}

    Dieses JavaScript weise ich dem entsprechenden HTML-Element zu:

    HTML
    1. <img src="img/team-logo/logo_tbd.png" onload="loadLogo(this)"></img>

    Nun zu meinem Problem:
    Das JavaScript funktioniert eigentlich so wie ich möchte. Es vergleicht den Text und ändert das Bild entsprechend dem Text so wie es sollte.

    Aber das Problem dabei ist, dass meine Webpage (in Chrome geöffnet) nach dem Laden des JavaScript's dauerhaft lädt (siehe Bild unten).


    Screenshot_1.png

    Ich habe das Gefühl, dass das JavaScript dauerhaft dieses Abfrage macht und nicht stoppt, sofern eine Auswahl getroffen wurde. Bin aber nicht schlau geworden, was an meinem Code falsch ist, dass das die Abfrage nicht stoppt :/


    Ich hoffe ihr könnt mir da weiterhelfen :)


    Grüsse,

    Andreas

  • Zitat

    Ich habe das Gefühl, dass das JavaScript dauerhaft dieses Abfrage macht und nicht stoppt, sofern eine Auswahl getroffen wurde.

    Genau das tut es: Du hast bei dem img einen Eventhandler für load registriert. Triggert dieser, weist Du dem Bild das src-Attribut zu und das Bild wird geladen. Ist es fertig geladen, triggert wieder der Eventhandler und weist das src-Attribut zu. Bild wird erneut geladen. Ist es fertig geladen, triggert ...

    Wenn ich das richtig sehe, brauchst Du gar keinen Eventhandler sondern musst nur einmal das src-Attribut zuweisen. Dann wird das Bild geladen und alles ist gut.

  • Vielen Dank für den Hinweis. Ich habe da wohl was falsch verstanden mit dem "onLoad" Event. Funktioniert nun nach kleiner Umschreibung der Funktion einwandfrei!


    Gruss,

    Andreas





    Funktionsfähige Variante für Interessierte:

    JavaScript
    1. loadLogo();
    2. function loadLogo() {    var text= document.getElementById("dynamicText").innerText;    var image = document.getElementById("dynamicLogo");
    3.     switch (text) {        case "Team_1":        image.setAttribute("src""img/team-logo/team_1.png");        break;
    4.         case "Team_2":        image.setAttribute("src""img/team-logo/team_2.png");        break;
    5.         default:        image.setAttribute("src""img/team-logo/team_tbd.png");        break;    }
    6. }
    HTML
    1. <img id="dynamicLogo" src="img/team-logo/logo_tbd.png"></img>