Wie zu erkennen, wenn eine Leinwand für die Manipulation bereit ist?

Question

Ich bin dynamisch hinzugefügt X Canvas-Elemente auf einer Seite über jQuery wie folgt:

$(document).ready(function() { 
    for(i=0;i<4;i++) {
        var can = $(document.createElement("canvas"))
                   .attr("id","table"+i)
                   .addClass("table")
                   .attr("width",640)
                   .attr("height",480)
                   .appendTo('#container');   
    }

    //...
});

Weder .append() noch .appendTo() haben einen Rückruf, weil sie sofort geschehen soll sind. Leider hat etwas über das Canvas-Element nicht sofort geschehen.

Wenn ich auf einem der Canvas-Elemente .getContext('2d') gehen wird es scheitern mit „getContext ist keine Funktion.“ Dies geschieht auf FF 3.5 sowie Chrome.

Wenn ich zuweisen und beliebige Ereignishandler auf die Leinwand Elemente wie .click(), und verwenden Sie .getContext() in diesem Fall es funktioniert perfekt.

Wie kann ich effizient bestimmen, dass eine Leinwand für die Manipulation bereit ist?

Answer 1

Ich glaube nicht, Sie getContext() auf dem can Variable verwenden können.

Wenn Sie das tun, versuchen can[0].getContext(). Dies wird tatsächlich das Element Objekt erhalten, nicht jQuery.

Answer 2

Als erstes würde ich sehen, ob es für beide Browser auf das ein Bug-Report ist.

Unterdessen können Sie verwenden setInterval, oder vielleicht auch nur eine Schleife, um nur zu prüfen, ob .getContext (ohne Klammern) wahr ist, und nur fort, nachdem es (mit einiger vernünftigen Grenze ist, so dass Sie den Browser mit einem nicht abgewürgt etwas Endlosschleife, wenn schief geht oder ein Benutzer nicht über diese Funktion in ihrem Browser.)

Answer 3

Sie können eine Funktion für das Ereignis domready der Leinwand anbringen.