Firefox Anomalie?

  • Howdy...

    ich habe ein Problem mit einem JavaScript Teil, welcher nur bei Firefox auftritt. Der IE scheint damit keine Probleme zu haben.
    Ich bitte darum nicht über Sinn, oder Unsinn zu Diskutieren, sondern beim Thema zu bleiben.

    Das Problem:
    Ich habe ein Hintergrundbild und will dessen Originalgrösse herausfinden. Dazu baue ich mir mittels JavaScript ein <img> Objekt und gebe dem die .src des Hintergrundbildes. Nun könnte ich ja die Grössen des <img>-Objektes auslesen und verwenden. Leider klappt dies nur beim IE!

    Code
    var reg_imgFile = /\w+\/\w+\.\S\S\S/; //  -> skin/middle_left.jpg
    var dummy  = document.createElement("img");
    var string;
    if (element.currentStyle)
       string = element.currentStyle.backgroundImage;
    else
       string = getComputedStyle(element,'').getPropertyValue("background-image");
    dummy.src  = string.match(reg_imgFile);
    alert("x:"+dummy.width+"  y:"+dummy.height);


    Beim Firefox erzeugt die Ausgabe beim ersten Laden der Seite ständig "0". Erst wenn die Seite im Browsercache liegt (hab dies durch Probieren herausgefunden) funktioniert sie einwandfrei und spuckt die Bildergrösse aus.

    Um den Fehler einzugrenzen habe ich eine setTimeout() Funktion geschrieben, welche den Ladezustand des Bildes kontinuierlich ausgibt. Das Bild ist demnach nie geladen und ich teste alles Lokal.

    Hat jemand eine Idee wie ich den Firefox dazu bringe, dass er das Bild rendert und ich dann seine Grösse auslesen kann?

    Vielen Dank...

  • Hallo JesseBlue,

    deine RegExp bzw. die daraus resultierende URL scheint Probleme zu machen. (vielleicht weil relativ?)

    Mit dieser geht es bei mir:

    Code
    /^url\(([^\)]+)\)$/

    <a href="data:text/html;charset=utf-8,%3C!DOCTYPE%20HTML%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20HTML%204.0%2F%2FEN%22%3E%0D%0A%3Chtml%3E%0D%0A%20%3Chead%3E%0D%0A%20%20%3Ctitle%3ETest%3C%2Ftitle%3E%0D%0A%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%0D%0A%20%20%23Hintergrund%20%7B%0D%0A%20%20%20%20background-image%3A%20url(http%3A%2F%2Fwww.firefox-browser.de%2Fforum%2Ftemplates%2FsubSilver%2Fimages%2Flogo_phpBB.jpg)%3B%0D%0A%20%20%20%20height%3A%20127px%3B%0D%0A%20%20%20%20width%3A%20259px%3B%0D%0A%20%20%7D%0D%0A%20%20%3C%2Fstyle%3E%0D%0A%20%20%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0D%0A%20%20%20%20window.onload%20%3D%20function()%20%7B%0D%0A%20%20%20%20%20%20var%20reg_imgFile%20%3D%20%2F%5Eurl%5C((%5B%5E%5C)%5D%2B)%5C)%24%2F%20%2F%2F%20%2F%5Cw%2B%5C%2F%5Cw%2B%5C.%5CS%5CS%5CS%2F%3B%20%2F%2F%20%20-%3E%20skin%2Fmiddle_left.jpg%0D%0A%20%20%20%20%20%20var%20dummy%20%20%3D%20document.createElement(%22img%22)%3B%0D%0A%20%20%20%20%20%20var%20string%3B%0D%0A%20%20%20%20%20%20var%20element%20%3D%20document.getElementById(%22Hintergrund%22)%3B%0D%0A%20%20%20%20%20%20if%20(element.currentStyle)%0D%0A%20%20%20%20%20%20%20%20%20string%20%3D%20element.currentStyle.backgroundImage%3B%0D%0A%20%20%20%20%20%20else%0D%0A%20%20%20%20%20%20%20%20%20string%20%3D%20getComputedStyle(element%2C'').getPropertyValue(%22background-image%22)%3B%0D%0A%20%20%20%20%20%20dummy.src%20%20%3D%20string.match(reg_imgFile)%5B1%5D%3B%0D%0A%20%20%20%20%20%20%2F%2Falert(string.match(reg_imgFile)%5B1%5D)%3B%0D%0A%20%20%20%20%20%20dummy.onload%20%3D%20function()%20%7B%0D%0A%20%20%20%20%20%20%20%20alert(%22x%3A%22%2Bdummy.width%2B%22%20%20y%3A%22%2Bdummy.height)%3B%20%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%3B%0D%0A%20%20%3C%2Fscript%3E%0D%0A%20%3C%2Fhead%3E%0D%0A%20%3Cbody%3E%0D%0A%20%20%3Cp%20id%3D%22Hintergrund%22%3EHallo!%3C%2Fp%3E%0D%0A%20%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E%0D%0A">von mir verwendete Test-Seite</a>

    Dr. Evil

  • Zuerst, Danke für die schnelle Antwort!

    Du hast ja in deinem Code die Breite und Höhe des Hintergrundbildes festgelegt, dies wollte ich ja verhindern.

    Mein Hintergedanke war es:
    Ich erstelle ein Image-Objekt aus dem Background-Bild. Dies mach ich deshalb, weil ich aus dem Image Objekt die Bildgrössen auslesen kann. Dies geht so beim Background-Image ja nicht!
    Jetzt wo ich die Grösse des Originals habe, kann ich ein <div> generieren, mit der ermittelten Grösse und dort das Hintergrundbild anwenden.

    Warum der ganze Umstand?
    Ich bin dabei eine grafische Oberfläche zu bauen, wo man Objekte durch die Gegend "ziehen" kann. Leider kann man keine Images gedrückt durch die Gegend ziehen, weil dann die Browser-Funktionalität anspringt. Beim Hintergrundbild ist dies nicht der Fall!

    So far...

    PS: der reguläre Ausdruck funktioniert soweit, hab mal testweise die Bilder einfach an den Body gehängt.

  • Die Bildgröße hatte ich angegeben, es geht aber <a href="data:text/html;charset=utf-8,%3C!DOCTYPE%20HTML%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20HTML%204.0%2F%2FEN%22%3E%0D%0A%3Chtml%3E%0D%0A%20%3Chead%3E%0D%0A%20%20%3Ctitle%3ETest%3C%2Ftitle%3E%0D%0A%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%0D%0A%20%20%23Hintergrund%20%7B%0D%0A%20%20%20%20background-image%3A%20url(http%3A%2F%2Fwww.firefox-browser.de%2Fforum%2Ftemplates%2FsubSilver%2Fimages%2Flogo_phpBB.jpg)%3B%0D%0A%20%20%7D%0D%0A%20%20%3C%2Fstyle%3E%0D%0A%20%20%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0D%0A%20%20%20%20window.onload%20%3D%20function()%20%7B%0D%0A%20%20%20%20%20%20var%20reg_imgFile%20%3D%20%2F%5Eurl%5C((%5B%5E%5C)%5D%2B)%5C)%24%2F%20%2F%2F%20%2F%5Cw%2B%5C%2F%5Cw%2B%5C.%5CS%5CS%5CS%2F%3B%20%2F%2F%20%20-%3E%20skin%2Fmiddle_left.jpg%0D%0A%20%20%20%20%20%20var%20dummy%20%20%3D%20document.createElement(%22img%22)%3B%0D%0A%20%20%20%20%20%20var%20string%3B%0D%0A%20%20%20%20%20%20var%20element%20%3D%20document.getElementById(%22Hintergrund%22)%3B%0D%0A%20%20%20%20%20%20if%20(element.currentStyle)%0D%0A%20%20%20%20%20%20%20%20%20string%20%3D%20element.currentStyle.backgroundImage%3B%0D%0A%20%20%20%20%20%20else%0D%0A%20%20%20%20%20%20%20%20%20string%20%3D%20getComputedStyle(element%2C'').getPropertyValue(%22background-image%22)%3B%0D%0A%20%20%20%20%20%20dummy.src%20%20%3D%20string.match(reg_imgFile)%5B1%5D%3B%0D%0A%20%20%20%20%20%20%2F%2Falert(string.match(reg_imgFile)%5B1%5D)%3B%0D%0A%20%20%20%20%20%20dummy.onload%20%3D%20function()%20%7B%0D%0A%20%20%20%20%20%20%20%20alert(%22x%3A%22%2Bdummy.width%2B%22%20%20y%3A%22%2Bdummy.height)%3B%20%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%3B%0D%0A%20%20%3C%2Fscript%3E%0D%0A%20%3C%2Fhead%3E%0D%0A%20%3Cbody%3E%0D%0A%0D%0A%20%20%3Cp%20id%3D%22Hintergrund%22%3EHallo!%3C%2Fp%3E%0D%0A%20%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E%0D%0A">auch ohne</a>. Das war mehr um zu sehen, ob das Hintergrundbild korrekt eingebunden ist.

    Um das Ziehen der Bilder zu ermöglichen könntest du aber auch mit den mousedown/up/press-Events experimentieren und dort Dinge wie return false, event.preventDefault() und event.stopPropagation() ausprobieren.
    Oder du setzt ein leeres Div mit höherem z-index über das Bild. Dabei müsstest du aber aufpassen, dass z.B. Links noch funktionieren.

  • Hmm... joar, dein Beispiel schaut echt gut aus. Seltsam... *grml*.

    Das mit den Events wäre natürlich auch eine Idee, würde mich aber wieder vor anderen Problemen werfen. Daher hatte ich diese Variante gewählt.

    Naja, ich sehe ja jetzt das es funktioniert, also muss etwas anderes an meinem Code falsch sein.

  • Das Event onLoad() scheint Wunder zu wirken. Eine echt gute Idee, denn damit stellt man ja sicher, dass das Bildchen fertiggeladen ist. Nur haben Events ja die Eigenart, dass sie nicht synchron laufen, sondern "neben" dem eigendlichen Code und sich erst dann Ausführen, wenn das passende Event auftritt.
    Dies macht die Sache echt net einfach. ;)

    Trotzdem many thx!