element.onload Problem

cottton · 11. Februar 2013

Ich bekomm den JS Teil einfach nicht gebacken =)
Bild soll angezeigt werden, wenn Maus over.

Kurze Erklärung:
Normal würde mal die src vom Bild einfach angeben. Dabei würden aber bei jedem pageload ~30 Bilder geladen werden.
Daher hab ich die src leer gelassen und per mousover -> JS function src ändern/eintragen -> JS function Container sichtbar machen.
Somit wird immer nur das Bild geladen, welches gerade gebraucht wird.

Nun muss ich aber noch der function, welche den Container sichtbar macht, sagen wenn das Bild fertig ist mit laden.
Die function hab ich schon gefunden:

JavaScript

var logo = document.getElementById('sologo');
    logo.onload = function () {
        /*ab jetzt ist Bild geladen*/	
    };

Nur bekomme ich es nicht eingebaut.
Der Ausschnitt mit dem entsprechenden Teil:

HTML

<tr style="display:none;" class="hidden" bgcolor="transparent" onmouseover="this.bgColor='#424242'" onmouseout="this.bgColor='transparent'">
        <td class="td_wpn_list" style="font-size:12px;text-align: left;" title="column: Weapon">
            <div class="box">
                MP443 SUPP.
                <span>
                    <img
                        onmouseover="
                            changeSrcById('wpn_img_6', 'Images/BF3/weapons/mp443_silenced.png');
                            setTimeout('toggleById(\'wpn_div_6\'); ', 200);
                        "
                        onmouseout="
                            toggleById('wpn_div_6')
                        "
                        style="vertical-align:middle;float:right;cursor:help;" title="show weapon picture" src="Images/help.png" width="13" height="13" alt="(?)"
                    />
                </span>
            </div>
            <div id="wpn_div_6" class="weapon_image" style="display:none;">
                <img id="wpn_img_6" src="" width='249' height='150' alt=""/>
            </div>
        </td>
        <td class="td_wpn_list" title="column: Class">
            pist
        </td>

Alles anzeigen

hier meine functions:

JavaScript

function changeSrcById(element, src){
            var id = document.getElementById(element);
            id.src = src;
        }
        function toggleById(element){
           var id = document.getElementById(element);
           (id.style.display == 'none')
           ? id.style.display = ''
           : id.style.display = 'none';
        }

Ohne "Bild.onload ..." funktioniert es schon. Hatte es einfach mit einem setTimeout() versucht zu lösen. Ist aber nichts richtiges.

Wollte nun die function changeSrcById() so ändern, dass sie ein true ausgibt, wenn das Bild fertig geladen ist:

JavaScript

function changeSrcById(element, src){
            var id = document.getElementById(element);
            id.src = src;
            id.onload = function () {
                return true;
            };
        }

Nur der Teil das true im HTML aufzugreifen, den bekomm ich nicht hin.

Mein Versuch es einzubauen sieht in etwas so aus:

HTML

...
                    <img
                        onmouseover="
                            if(changeSrcById('wpn_img_6', 'Images/BF3/weapons/mp443_silenced.png') === true){
                                setTimeout('toggleById(\'wpn_div_6\'); ', 200)
                            }
                        "
                        onmouseout=" ...

Funktioniert aber nicht, da die if-Bedingung ja nicht wartet =(
ich schätze da muss ein Eventlistener ran, womit ich mich aber garnicht auskenne.
Jemand ne Idee?

Basi · 2. März 2015

Jetzt hat sich hier ein Spambot zu Wort gemeldet und ich dachte das Thema ist aktuell.. Mist...

Egal hier eine mögliche Lösung, wichtig zu beachten sind vor allem die data Attribute:

HTML

<div class="box">
        MP443 SUPP.
        <span>
            <img data-target-image="wpn_img_6" src="Images/help.png" />
        </span>
    </div>




    <div id="wpn_div_6" style="display:none;">
        <img id="wpn_img_6" src="" data-image-src="bild.jpg"/>
    </div>

Alles anzeigen

JavaScript

function toggleElement(element) {
        (element.style.display == "none") ? element.style.display = "" : element.style.display = "none";
    }




    // Alle Container mit der Klasse "box" selektieren.
    var box = document.getElementsByClassName("box");




    // Diese Schleife durchläuft das box-Array und
    // fügt den Hilfsbildern die jeweiligen Funktionen zu.
    for (var i = 0; i < box.length; i++) {




        // Hier wird das Bild im div.box selektiert.
        var helpImage = box[i].getElementsByTagName("img")[0];




        // Hier wird ein Eventlistener hinzugefügt der jedes
        // mal auslöst wenn der Benutzer mit der Maus über
        // das Hilfsbild fährt.
        helpImage.addEventListener("mouseover", function () {




            // Das Zielelement wird ermittelt indem das data-target-image
            // Attribut des Hilfsbildes ausgelesen wird.
            var targetImage = document.getElementById(this.dataset.targetImage);




            // Überprüfen ob SRC Attribut bereits gesetzt wurde, wenn ja
            // dann das Laden überspringen und nur das Elternelement sichtbar
            // schalten
            if (-1 == targetImage.src.indexOf(targetImage.dataset.imageSrc)) {
                // src zu data-image-src setzen
                targetImage.src = targetImage.dataset.imageSrc;




                // Wenn das Bild geladen wird schaltet diese Funktion
                // das Elternelement sichtbar.
                targetImage.onload = function (e) {           
                    toggleElement(this.parentNode);
                }
            }




            // Dieser Code wird ausgeführt wenn das Bild bereits geladen
            // wurde.
            else {
                toggleElement(targetImage.parentNode);
            }
        });




        // Hier wird ein weiterer Eventlistener hinzugefügt welcher ausgelöst
        // wird wenn der Benutzer das Hilfsbild mti der Maus verlässt.
        helpImage.addEventListener("mouseout", function () {




            // Das Zielelement wird selektiert...
            var divElement = document.getElementById(this.dataset.targetImage).parentNode;




            // ...und ausgeblendet.
            toggleElement(divElement);




        });




    }

Alles anzeigen

element.onload Problem

Jetzt mitmachen!

Teilen