Como posso mostrar conteúdo quando o Javascript não estiver disponível, escondê-lo quando javascript está disponível e não flicker em ambos os casos?

StackOverflow https://stackoverflow.com/questions/1006798

Pergunta

Eu tenho um formulário simples para opções de transporte e estou usando javascript para auto enviar o formulário quando alguém seleciona uma nova opção a partir da lista suspensa.

Para os navegadores suportam sem javascript, há também um botão para enviar o formulário. Este botão está escondido usando javascript.

No entanto, isto significa meu botão é visível por um período breve de tempo e pode causar uma cintilação como o resto do conteúdo é reformatado.

Alguém pode sugerir uma maneira de criar o botão assim que começa escondido, mas torna-se visível somente se javascript não está disponível? por exemplo, começar com visor: nenhuma; e magicamente mudar para display: block; se e somente se não houver javascript.

Foi útil?

Solução

Basta colocar nada dentro de tags <noscript> ... </noscript> e, em seguida, ela só vai aparecer se JavaScript não está habilitado / disponíveis.

Outras dicas

Depende de como você está escondendo isso, você está usando um DOM pronto ou uma janela está pronto? Janela aguarda pronto para todas as imagens para download, que é geralmente muito tempo.

Para acessibilidade, razões, eu escondê-lo no DOM carregado. Mas para garantir que ele não vai aparecer, você poderia colocá-lo em um elemento noscript 

<noscript>
    <input type="submit" />
</noscript>

Quanto ao seu último parágrafo, nada disso pode acontecer na ausência de JavaScript.

Basta escrever javascript discreto: http://icant.co .pt / artigos / sete-regras-de-discreto-javascript / .

O que você faz é escrever sua página como uma página normal, mas, em seguida, usar o código na parte inferior para iniciar o javascript e começar a editar a página para torná-lo mais interativo. A beleza disto é que, se eles tem o javascript desligado a página é normal, mas, se eles têm-lo, então você pode graciosamente adicionar mais recursos.

Eu não sou um grande fã da opção como isso pode significar um monte de código extra para ser baixado, que não é necessário.

Nesta página olhada comentário 5 para uma solução boa para ser capaz de fazer alterações antes de qualquer coisa é realmente exibido: http://dean.edwards.name/weblog/2006/06/again/

Você pode usar o script antes e depois no botão enviar para escrever de início e fim marcas de elemento div escondidas.

Uma opção seria começar com o botão mostrado, em seguida, modificar o seu CSS do JavaScript: 

<head>
    ...
    <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8">
    <script>
        document.styleSheets[0].addRule(".hideMe", "display:none");
    </script>
    ...
</head>

A modificação do estilo em vez do botão (e colocar esse código fora de um onload) garante que ele vai ser escondidas antes que o botão é desenhado.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top