Pergunta

Existe uma maneira de detectar quando o respond.js terminou o trabalho?

No momento, leva cerca de 1 a 2 segundos até que o layout seja exibido corretamente.Gostaria de adicionar algum tipo de indicador de carregamento que ficará oculto quando o respond.js terminar seu trabalho.

Obrigado.

PS.Conheço as boas práticas, mas o cliente está pagando o dinheiro.

Foi útil?

Solução

Você pode simplesmente ocultar o contêiner e exibir o indicador de carregamento por padrão e, em seguida, usar uma consulta de mídia para alterná-los.

.container {
    display: none;
}
.loading {
    display: block;
}
@media (min-width: 1px) {
    .container {
        display: block;
    }
    .loading {
        display: none;
    }
}

Os navegadores que suportam a consulta de mídia mostrarão imediatamente o contêiner e ocultarão o indicador de carregamento.O IE antigo não funcionará até que a consulta de mídia seja processada pelo respond.js.

Outras dicas

AVISO:RANT

Pense nisso por um segundo.Pense em ser um usuário com sua UI bloqueada enquanto espera que um JS modifique seu layout em um navegador antigo (IE<9) com um mecanismo de renderização lento.Aqui está sua solução:

<!--[if lte IE 8]>
<style type="text/css">
 body { min-width: 1020px; }
</style>
<![endif]-->

Os usuários do IE8 preferem rolar um pouco horizontalmente (eles estão acostumados com uma experiência de usuário abaixo do ideal, afinal estão usando o IE8!!!!) do que fazer com que o respond.js destrua a experiência do usuário porque está prejudicando o desempenho do navegador.

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