fortalecimento progressivo, o comportamento quando as páginas não são totalmente carregado ainda

Question

Estou desenvolvendo sites usando melhoria progressiva implementada completamente em jQuery.

Por exemplo, eu estou adicionando onclick manipuladores de eventos dinamicamente para marcas de âncora para reproduzir arquivos MP3 ligados "inline" utilizando SoundManager e aparecendo jogadores YouTube para links do Youtube, por meio de $ (document) .ready (function ()).

No entanto, se o usuário clica sobre eles, enquanto a página está carregando, eles ainda obter a versão não-reforçada.

Já pensou em esconder o material relevante (via display: none, ou algo parecido). E mostrá-lo quando carregado, ou colocar um modal de diálogo "carregamento", mas tanto o som como hacks

idéias melhor? Eu sinto que estou perdendo algo completamente óbvio aqui.

Saudações,

Alex

Answer 1

Eu não testei isso, mas você pode tentar live . A idéia é que você pode colocar seus manipuladores clique fora da document.ready que eles são executados imediatamente. Desde usos live delegação de eventos para alcançá-lo da funcionalidade, você realmente não precisa esperar para o DOM para estar pronto, e todos os cliques que são feitas enquanto a página está carregando ainda deve ser capturado pelo manipulador de eventos.

Se isso não funcionar, você pode tentar colocar as tags de script Javascript diretamente abaixo o que eles precisam para bind. Não é bonito, mas vai praticamente eliminar o problema.

Answer 2

Supondo que você tenha o bom senso usado e as pessoas estão caindo para a versão não-reforçada apenas porque o atraso é muito longa, então eu iria usar CSS para desativar os controles . A CSS irá carregar quase imediatamente. Em seguida, usando Javascript gostaria de alternar a CSS para que os controles estão habilitados para re.

No entanto, minha primeira reação é que se o usuário pode clicar nele, enquanto a página está carregando, então sua página ou conexão é muito lenta. No entanto, se este é raramente o caso - menos de 1% do tempo - então você pode minimizá-la, desde que o usuário pode alcançar seu objetivo, que é ouvir a sua música. Digo isto porque uma vez que as percebe usuários que uma melhor experiência aguarda meio segundo depois, ele normalmente irá esperar por Javascript para renderizar e clique.

Answer 3

Eu tomo a posição oposta aleemb relação ao uso de CSS. Se você usar css para desativar os controles, então qualquer um que tem o JavaScript desativado ou é usando software de acessibilidade não será capaz de usar esses controles sem desativar sua folha de estilo completamente diferente.

Você pode usar uma pequena linha javascript logo antes da tag do corpo de fechamento para esconder os elementos através js muito rapidamente. Se for em linha e não tem que carregar recursos externos será muito rápido, geralmente mais rápido que um usuário pode clicar.

No entanto, eu do de acordo com aleemb que se os usuários são capazes de processar mentalmente a página e torná-lo para o controle que eles querem clique antes de seus js é carregado, provavelmente há um problema mais profundo com a forma como a sua página é de carregamento. Olhe em maneiras de diminuir o tempo de carga:. Comprimir arquivos de imagem, gzipping html / css / js arquivos, apoucar o seu javascript, combinar imagens em sprites, etc

Answer 4

Eu sugiro seguinte aconselhar de Paolo Bergantino -. delegação evento é o caminho a percorrer para evitar o problema completamente

Eu tive um problema semelhante onde a delegação de evento não poderia fazer o trabalho - você pode leia sobre isso aqui .