Zugriff auf ungeladene HTML-Objekte

visiondpc

Erfahrenes Mitglied
Hallo, ich versuche für eine Funktion zu erstellen, die alle Bilder innerhalb eines DIVs durch einen Link ersetzt. Durch klicken des Links sollen die Bilder dann in einem PopUp angezeigt werden.
Das ganze hat den Sinn lange Ladezeiten beim Aufrufen eines Themas in einem Forum zu verhindern.

Das Problem ist, um an den gesamten Inhalt des DIVs zu kommen muss dieses anscheinend erstmal vollständig geladen werden was natürlich die ganze Aktion überflüssig macht.

Bisher habe ich es so versucht.

HTML:
<script type="text/javascript" language="javascript">
<!--
function imagePopUp()
{
	var linkList = document.getElementById('flipBox').getElementsByTagName('a');
	
	var str = '';
	var j = 0;
	
        for(var i;i<linkList.length;i++)
	{
		if(j==0)
		{
			str += '<tr>';
		}
		str += '<td><a href="'+linkList[i].href+'">'+linkList[i].innerHTML+'</a></td>';
		//alert(str);
		j++;
		if(j==3)
		{
			j = 0;
			str += '</tr>';
		}
	}
	
       document.getElementById('flipBox').innerHTML = '<img src="popup.jpg" onclick="showPopUp('+str+')" />';	
}
//-->
</script>
<div id="flipBox">
     <a href="img1.jpg"><img src="preview1.jpg" /></a>
     <a href="img1.jpg"><img src="preview2.jpg" /></a>
     <a href="img1.jpg"><img src="preview3.jpg" /></a>
</div>

Das Ergebnis ist natürlich eine Meldung, dass flipBox null ist.

Kann mir jemand helfen und sagen wie ich dieses Problem umgehe?
 
Zuletzt bearbeitet:
Ok, danke.
Aber dafür in die Programmierung des Forums einzugreifen ist glaube ich zuviel Aufwand um ein wenig Ladezeit zu sparen.
 
Naja hierfür gibt es eine Alternative das JavaScript dann zu starten wenn erstmal nur die DOM Struktur geladen wurde und noch nicht die Bilder und Filme oder sonstige fremde Inhalte.

Die Funktion einfach so zu starten ohne ein window.onload oder DOM geladen geht prinzipiell nicht mit JavaScript.

Für DOM geladen verwende ich diese Funktion :

Code:
var DOM = {
    domCheck:false,
    domReady:false,
    inRow:new Array(),
    loaded:function (func) {
        DOM.inRow.push(func);
        if(!DOM.domCheck) {
            (function(){
                DOM.domCheck = true;

                if(document.all && /msie/i.test(navigator.userAgent)) {
                    document.write("<script type='text/javascript' id='dummyScript' defer src='javascript:void(0);'><\/script>");
                    var ds = document.getElementById("dummyScript");

                    ds.onreadystatechange = function () {
                        if(this.readyState == "complete") {
                            DOM.domReady = true;
                            domLoaded();
                        }
                    };
                } else {
                    document.addEventListener("DOMContentLoaded",function () { DOM.domReady = true;domLoaded(); },false);
                }
                return null;
            })();
        } else {
            if(DOM.domReady) {
                func();
            }
        }

        function domLoaded(){
            for(func in DOM.inRow) DOM.inRow[func]();
        };
    }
};

Aufruf dann zum Beispiel
Code:
DOM.loaded(function(){
    alert("tu was dolles");
});

Erspart einen die Wartezeit das fremde Inhalte und/oder Bilder geladen wurden also eigentlich ersetzt das window.onload komplett. Könnte man gegebenenfalls nochmal drüber schaun ob man es nicht besser machen könnte aber soweit hat es überall funktioniert.

Hat in den gängigen Browsern bisher überall funktioniert ausser die Version von Safari vor 3.01 ab 3.01 klappts auch da. IE unter Version 6 kann ich nix sagen bei dem 6.0er gings auch da.
 
Ok, danke.
Aber dafür in die Programmierung des Forums einzugreifen ist glaube ich zuviel Aufwand um ein wenig Ladezeit zu sparen.

Ich hatte damit auch eher eventuelle Konfigurationsmöglichkeiten (je nach Forensoftware) gemeint.
Aber FipsTheThief hat recht. Das ist tatsäclich möglich und die gängigen JS-Frameworks bieten z.B. auch entsprechende Events, hatte ich gar nicht dran gedacht.

LG
 

Neue Beiträge

Zurück