DEMORA EN CARGA CSS

Citar

Escrito el 28 Ene 2014 03:58 pm

Buenos días a todos, me sucede lo siguiente, tengo una web la cual al ingresar me muestra como por una fracción de segundo como si no tuviera asignados los estilos y al momento los carga y los muestra correctamente. Hay alguna forma de eliminar ese "parpadeo" y que me muestre de forma inmediata la web formateada? Muchas gracias.

Por alejilla

Claber

120 de clabLevel

Genero:Femenino

Envíale un mensaje privado

Colombia

Citar

Escrito el 28 Ene 2014 06:35 pm

¿Cuál es la página en cuestión?.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 28 Ene 2014 07:05 pm

http://www.constructorarioazul.com/

Por alejilla

Claber

120 de clabLevel

Genero:Femenino

Envíale un mensaje privado

Colombia

Citar

Escrito el 28 Ene 2014 08:10 pm

Bueno, estás usando JavaScript para determinar el ancho de la pantalla y a partir de allí cargar el CSS correcto. Así que el navegador debe cargar esos CSS cuando la página ya está mostrándose en el navegador.

Deberías prescindir de JS y hacer lo mismo con @media-query (diseño responsive).

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 28 Ene 2014 09:49 pm

A pesar de ello la descarga parece rápida. No se como notan que se cargan lento

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado Web

FullStack Web Developer

@elporfirio

Citar

Escrito el 29 Ene 2014 12:17 pm

No, no se carga lento, no es lo que estamos viendo. Lo que vemos es que cuando se muestra el contenido, por una breve fracción de segundo, ese contenido se muestra sin los estilos aplicados.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 29 Ene 2014 12:33 pm

Hola, gracias por la respuesta, tenía inicialmente la carga de los css con @media-query, pero lo que me pasa es que en los dispositivos me sigue mostrando la versión de escritorio, como si no reconociera lo demás, los tenía así:

Código HTML :

<link href="css/movil.css" rel="stylesheet" type="text/css" media="only screen and (max-width:400px)"/>

<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width:401px) and (max-width:600px)"/>

<link href="css/pc1.css" rel="stylesheet" type="text/css" media="only screen and (min-width:601px) and (max-width:1400px)"/>

<link href="css/pchd.css" rel="stylesheet" type="text/css" media="only screen and (min-width:1401px)"/>

Tienen algún error?

Por alejilla

Claber

120 de clabLevel

Genero:Femenino

Envíale un mensaje privado

Colombia

Citar

Escrito el 29 Ene 2014 03:50 pm

Agrega esto en el <head> del HTML:

Código HTML :

<meta name="viewport" content="width=device-width, minimum-scale=1.0, user-scalable=no" />

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 29 Ene 2014 05:54 pm

Hola, con esta sentencia funciona bien en iphone y en android sosteniendo el teléfono vertical, pero al rotarlo horizonalmente (android) me muestra la versión de escritorio grandota y por supuesto no escalable

Por alejilla

Claber

120 de clabLevel

Genero:Femenino

Envíale un mensaje privado

Colombia

Citar

Escrito el 29 Ene 2014 08:57 pm

Será cuestión de ajustar el ancho en las media-queries.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

DEMORA EN CARGA CSS

Escribe una respuesta rapida