javascript - habilitar - ¿Cómo hacer que el navegador(IE y Chrome) solicite imágenes antes de los scripts?
habilitar javascript en chrome en windows (5)
Nota: Si está leyendo esto por primera vez, puede saltar directamente a ACTUALIZAR, ya que aborda el problema con mayor precisión.
Así que tengo una página web.
En la cabeza tengo una imagen de fondo CSS:
<style>
#foo { background-image:url(foo.gif); }
</style>
En la parte inferior de la página cargo mis scripts:
<script src="jquery.js"></script>
<script src="analytics.js"></script>
Dado que los scripts se encuentran en la parte inferior de la página, y el CSS en la parte superior de la página, asumí que los navegadores cargarán primero la imagen. Sin embargo, este parece no ser el caso.
Esta es una captura de pantalla de las herramientas de desarrollo de Chrome:
http://www.vidasp.net/media/cssimg-vs-script.png
Como puede ver, la imagen se carga después de los scripts. (La línea azul vertical es el evento de carga de la página DOMContentLoaded. La enorme brecha de 45 ms es el tiempo en el que Chrome analiza el código fuente de jQuery).
Ahora, mi primera pregunta es:
¿Es este comportamiento estándar en los navegadores? ¿Las imágenes de fondo CSS siempre se cargan después de todos los scripts en la página?
En caso afirmativo, ¿cómo puedo asegurarme de que esas imágenes se carguen antes de los scripts? ¿Hay una solución fácil y conveniente para este problema?
ACTUALIZAR
Hice un caso de prueba. Este es el código fuente HTML:
<!DOCTYPE html>
<html>
<head>
<style> body { background-image: url(image1.jpg) } </style>
</head>
<body>
<div> <img src="image2.jpg"> </div>
<script src="http://ajax.googleapis.com/ajax/.../jquery.min.js"></script>
<script src="http://vidasp.net/js/tablesorter.js"></script>
</body>
</html>
Como puede ver, tengo una imagen de fondo CSS, una imagen normal y dos scripts. Y ahora los resultados:
EXPLORADOR DE INTERNET (9 beta)
http://www.vidasp.net/media/loadorder-results/ie2.png
http://www.vidasp.net/media/loadorder-results/ie1.png
Internet Explorer solicita primero la imagen normal, luego los dos scripts y la última imagen CSS .
FIREFOX (3.6)
http://www.vidasp.net/media/loadorder-results/firefox2.png
http://www.vidasp.net/media/loadorder-results/firefox1.png
Firefox lo está haciendo bien. Todos los recursos se solicitan en el orden en que aparecen en el código fuente HTML.
CROMO (último establo)
http://www.vidasp.net/media/loadorder-results/chrome2.png
http://www.vidasp.net/media/loadorder-results/chrome1.png
Chrome demuestra el problema que me hizo escribir esta pregunta en primer lugar. Los guiones se solicitan antes que las imágenes.
Ópera (11)
http://www.vidasp.net/media/loadorder-results/opera1.png
http://www.vidasp.net/media/loadorder-results/opera2.png
Al igual que Firefox, Opera también lo está haciendo bien . :D
Para resumir:
- Firefox y Opera están solicitando los recursos tal como aparecen en el código fuente.
Excepciones por lo que esta regla:
- Internet Explorer solicita las últimas imágenes de fondo CSS.
- Chrome solicita secuencias de comandos antes de las imágenes, incluso cuando las secuencias de comandos aparecen más adelante en el código fuente
Ahora que expuse el problema, permítanme pasar a mi pregunta:
¿Cómo hacer que IE y Chrome soliciten las imágenes antes de los scripts?
La mayoría de los navegadores más recientes a este tipo de precargas paralelas impredecibles de estos días, por razones de rendimiento y básicamente arruinan cualquier posibilidad de crear una orden para cargar componentes. Esto, por supuesto, sucede una vez que se ha cargado el DOM completo. La misma historia que con la carga perezosa de imágenes de JQuery , que se ha roto hace un tiempo.
Resolvimos este problema usando .load dentro de la llamada jQuery .ready
algo como:
jQuery(document).ready(function($){
jQuery(''#my_container img'').load(function($){
/* SCRIPT */
});
});
Tenga en cuenta que el navegador no puede hacer nada hasta que construye el DOM. Así que primero analiza toda la página, ENTONCES carga las imágenes (incluso si son del CSS).
Podría cargar las imágenes en los segmentos de DATOS en línea en el CSS o la página, que podrían acelerar esas cosas, o podría inyectar la referencia jQuery después de que se cargue la página (por ejemplo, configurar un temporizador para 500 ms), pero obviamente eso afectará la usabilidad hasta cierto punto.
Ahora, estoy bastante seguro de que todo depende de la implementación, siempre puede encontrar un navegador que cargue las imágenes como se las presentó, pero considere lo que significa construir un DOM y luego rellenarlo.
http://en.wikipedia.org/wiki/Data_URI_scheme
Si SO no lo elimina, debería haber un punto rojo entre aquí y el código: /
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4Tzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />
Eso es lo que quise decir, usar el esquema de URI de DATOS
Una opción posible es cargar todas las imágenes que necesita al inicio de su script. Vea este artículo de TechRepublic para más información.
Utilice las capacidades de precarga de imágenes a través del atributo rel = "preload"
<link rel="preload" href="images/mypic.jpg" as="image">
El atributo as indica el tipo de objeto que el navegador debe esperar. Por lo tanto, esto agrega las prioridades más altas entre todas las imágenes que carga en la página, pero no cambia la prioridad "JS -> Imagen"
<link rel="preload" href="images/mypic.jpg">
Declaración sin permiso para precargar imágenes incluso antes de cargar js, lo que aumenta la prioridad de carga de imágenes.
