Laufzeitverhalten Probleme Javascript

Orkan

Javascript zeigt bei mir ein sehr seltsammes Verhalten.

Wenn ich alert("blablabla"); auskommentiere, werden weiter unten width und height nicht korrekt abgefragt und das canvas bekommt falsche Dimmensionen.
Kommentiere ich alert(canvas.getAttributeNode("height").nodeValue ); aus, wirft die letzte Zeile eine Exception.
Ich kann mir das nur so erklären das durch alert der Programmfluss so lange gestoppt wird, das die Änderungen im document angewandt werden können.
Gibt es eine Möglichkeit das zu Umgehen im fertigen Programm sollten nach Möglichkeit keine alert() Aufrufe drin sein.

Code

var img = window._content.document.createElement("img");
		var src = window._content.document.createAttribute("src");
		src.nodeValue = image_url;
		img.setAttributeNode(src);
		alert("blablabla"); //alert1


		var canvas = window._content.document.createElement("canvas");
		var height = window._content.document.createAttribute("height");
		var width = window._content.document.createAttribute("width");

		height.nodeValue = img.height;
		width.nodeValue = img.width;


		canvas.setAttributeNode(height);
		canvas.setAttributeNode(width);


		alert(canvas.getAttributeNode("height").nodeValue ); //alert2

		window._content.document.documentElement.appendChild(canvas);
		var canvas_context = canvas.getContext("2d");


		canvas_context.drawImage(img, 0, 0);

Alles anzeigen

Dr. Evil

Das Problem scheint mir zu sein, dass das Bild noch nicht geladen ist, wenn du es in das Canvas "malen" willst. Du wirst es also "preloaden" müssen. Oder du wartest auf ein onload-event, bis du das Canvas füllst.

Orkan

Zitat von Dr. Evil

Das Problem scheint mir zu sein, dass das Bild noch nicht geladen ist, wenn du es in das Canvas "malen" willst. Du wirst es also "preloaden" müssen. Oder du wartest auf ein onload-event, bis du das Canvas füllst.

Kannst du mit genauer sagen was ein preload ist oder wie ich auf das onload Event warte.
Mir reicht die Sofwaretechnisch schönere Variante bzw. ein Literaturlink.

Dr. Evil

ich würde es denke ich so machen:

Code

var img = document.createElementNS("http://www.w3.org/1999/xhtml", "img");
      var src = document.createAttribute("src");
      src.nodeValue = image_url;
      img.setAttributeNode(src);
      img.onload = function procede() {
        //alert("blablabla"); //alert1


        var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
        var height = document.createAttribute("height");
        var width = document.createAttribute("width");

        height.nodeValue = img.height;
        width.nodeValue = img.width;


        canvas.setAttributeNode(height);
        canvas.setAttributeNode(width);


        //alert(canvas.getAttributeNode("height").nodeValue ); //alert2

        document.documentElement.appendChild(canvas);
        var canvas_context = canvas.getContext("2d");


        canvas_context.drawImage(img, 0, 0);


// so hab ich getestet:
//        canvas.style.minWidth = "30px";
//        canvas.style.minHeight = "30px";
//        document.getElementById("urlbar-container").parentNode.appendChild(canvas);
      }

Alles anzeigen

Ich habe mir auch noch erlaubt, das window._content.document.createElement, das du anscheinend verwendest hast, um HTML-Elemente zu erzeugen, durch das imho schönere document.createElementNS zu ersetzen.