javascript - then - ¿Cómo evitar el ''flash'' blanco en la carga de la página creada por el retraso de carga de la imagen de fondo?
resolve jquery (5)
No demore la carga de partes de su sitio: ¿qué pasaría si la imagen de fondo tuviera un error en la transmisión y nunca llegara? Tus scripts nunca se cargarían.
En cambio, si realmente no te gusta el flash "blanco", configura el color de fondo del documento a un color más agradable, más en línea con tu imagen de fondo. Puedes hacerlo en el mismo estilo css:
body {
background: #EDEBED url(myGrayBackgroundImage.jpg);
}
Es simple, prácticamente no tiene costo, no se rompe y no demora las descargas innecesarias. Parece que ya estás haciendo algo como esto, no lo cambiaría. No creo que nadie tenga la expectativa de que su sitio se vea de cierta manera antes de que se cargue.
El problema es que, en la mayoría de los sitios en la web, hay imágenes de fondo. Toman tiempo para cargar. Normalmente, no sería un problema si las imágenes estuvieran optimizadas y fueran lo suficientemente pequeñas. Sin embargo, en algunos de mis sitios, los archivos javascript encuentran su forma de cargarse antes que cualquier otra cosa en la página, ¡ aunque estén en el pie de página ! Esto crea un "flash" blanco antes de que se cargue la imagen de fondo. ¿Por qué mi javascript se carga primero antes que nada? Tengo este problema en muchos sitios, y lo veo en todas partes. Aquí está el sitio en el que estoy trabajando actualmente:
http://www.bridgecitymedical.com/wordpress/
¡Gracias!
tl; dr ¿Cómo puedo diferir la carga de javascript en mis sitios web para que la imagen de fondo se cargue antes que cualquier otra cosa, evitando así que "blanco" aparezca en blanco antes de que el navegador termine de descargar la imagen?
Por lo tanto, mientras que cambiar el color de fondo ayuda, es importante tener en cuenta que la razón por la que la página no se carga rápidamente probablemente se deba a que javascript está en el encabezado. Puedes remediar esto poniendo tus etiquetas javascript
<script type="text/javascript" src="/path/to/js/javascript.js"></script>
en el pie de página de sus páginas para que se cargue después de que el navegador ya haya leído el css y haya mostrado la mayor parte de la página. Me doy cuenta de que esta es una publicación antigua, pero me la encontré pensando en este problema y me di cuenta (recordando conversaciones y publicaciones que había visto antes) que tenía el js en mi encabezado.
Puedes usar algo como esto:
HTML
<!-- Add a class to flag when the page is fully loaded -->
<body onload="document.body.classList.add(''loaded'')">
CSS
/* Hide slider image until page is fully loaded*/
body:not(.loaded) #slider img {
display:none;
}
Quería agregar algo, en caso de tener un conjunto de imágenes de fondo negro para el cuerpo. Estaba experimentando con transiciones entre páginas en el mismo sitio. Finalmente utilicé esto (carga perfectamente el fondo negro del negro, evitando el flash, ¡sí!):
html{
background-color: black;
}
body{
-webkit-animation: fadein 1.5s; //I use chrome
background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) ), url(''wall_pattern.jpg'');
color: white;
}
Yo usaría una cadena de consulta "? 201611" en la URL de la imagen en css. Esto le indica al navegador qué versión de la imagen debe cargar. Entonces, en lugar de buscar una nueva versión cada vez, cargará la versión guardada en el caché. El efecto flash ocurrirá solo la primera vez que se visite el sitio web.
