Como detectar quando uma tela está pronto para manipulação?

Question

Estou dinamicamente adicionando elementos X lona para uma página via jQuery assim:

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

    //...
});

Nem .append() nem .appendTo() ter um retorno de chamada, porque é suposto acontecer imediatamente. Infelizmente, algo sobre o elemento de tela não acontece imediatamente.

Quando vou a .getContext('2d') em um dos elementos de lona ele falhará com "getContext não é uma função." Isso acontece em FF 3.5, bem como Chrome.

Se eu atribuir e manipulador de eventos arbitrária para os elementos de lona como .click() e uso .getContext() Nesse caso, ele funciona perfeitamente.

Como posso eficientemente determinar que uma tela está pronto para manipulação?

Answer 1

Eu não acho que você pode usar getContext() sobre a variável can.

Se você está fazendo isso, tente can[0].getContext(). Isso vai realmente obter o objeto de elemento, não do jQuery.

Answer 2

Em primeiro lugar, eu ia ver se há um relatório de bug no nisto por qualquer navegador.

Enquanto isso, você pode usar setInterval, ou talvez apenas um loop, apenas para verificar se .getContext (sem colchetes) é verdadeira, e só prossiga depois que ele é (com um limite razoável para que você não parar o navegador com uma loop infinito se algo der errado ou um usuário não tem essa característica em seu browser.)

Answer 3

Você pode anexar uma função para o evento DOMReady de tela.