detectar quando respond.js terminou o trabalho
-
21-12-2019 - |
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.
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.