Come rilevare quando una tela è pronta per essere manipolata?

Question

Sto aggiungendo dinamicamente X elementi canvas a una pagina tramite jQuery in questo modo:

$(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');   
    }

    //...
});

Né .append () né .appendTo () hanno un callback, perché dovrebbero avvenire immediatamente. Sfortunatamente, qualcosa sull'elemento canvas non accade immediatamente.

Quando vado a .getContext ('2d') su uno degli elementi del canvas fallirà con " getContext non è una funzione. " Questo succede su FF 3.5 e su Chrome.

Se assegno un gestore di eventi arbitrario agli elementi canvas come .click () e utilizzo .getContext () in quell'evento, funziona perfettamente.

Come posso determinare in modo efficiente che una tela è pronta per essere manipolata?

Answer 1

Non credo che tu possa usare getContext () sulla variabile can .

Se lo stai facendo, prova può [0] .getContext () . Questo in realtà otterrà l'oggetto element, non quello di jQuery.

Answer 2

In primo luogo, vedo se è presente una segnalazione di bug in entrambi i browser.

Nel frattempo, potresti usare setInterval, o forse solo un ciclo, per verificare se .getContext (senza parentesi) è vero, e procedere solo dopo (con qualche limite ragionevole in modo da non bloccare il browser con un ciclo infinito se qualcosa va storto o un utente non ha quella funzione nel proprio browser.)

Answer 3

È possibile associare una funzione all'evento DOMReady dell'area di disegno.