retrasar la carga de una cierta imagen de fondo CSS

Question

de un CSS como esto:

... 
#big-menu { 
    background: #fff url(../images/big-menu.jpg) no-repeat; 
} 
#some-menu { 
    background: #fff url(../images/some-menu.jpg) no-repeat; 
} 
#some-other-menu { 
    background: #fff url(../images/some-other-menu.jpg) no-repeat; 
} 
... 

hay una manera de retrasar la carga de la imagen de fondo #big-menu 's de, para que se cargue después de todo lo demás, incluyendo todos de las imágenes en el HTML y en cualquier otro fondo CSS (some-menu y some-other-menu).

La razón es que big-menu.jpg tiene un tamaño muy grande y quiero que se cargue último. Después de todo, solo sirve como un caramelo, y hay otras imágenes de fondo que tienen un mejor uso que eso. (como los que se usan en los botones)

¿El orden de ponerlo en CSS o las apariciones del marcado (#big-menu) en HTML tiene algo que ver con lo que se carga primero? o hay una forma más confiable de controlarlo? javascript (jQuery preferido) está bien.

Answer 1

El pedido en css no controla qué recursos se cargan primero, pero sí qué estilo existente se sobrescribe o se hereda.

Pruebe el evento JavaScript onload. El evento se ejecuta solo después de que la página termine de cargarse.

function loadBG(){ 
    document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)"; 
} 
window.onload=loadBG(); 

Answer 2

El control cuando una imagen se carga en CSS no es realmente posible. Podría tratar de ponerlo en la parte inferior de su StyleSheet, pero dudo que vea una mejora.

Answer 3

No creo que la ubicación en la hoja de estilo lo afecte, ya que el orden de los elementos a los que se aplica decidirá qué imagen se cargará primero.

Se puede usar jQuery para cargar las imágenes en la secuencia correcta, aunque

$('firstElement').addClass('some-menu'); 
$('secondElement').addClass('some-other-menu'); 
$('lastElement').addClass('big-menu'); 

EDIT: bien, así que entonces tal vez de añadir una clase, una mejor solución sería añadir el fondo -imágenes en tiempo de ejecución.

$('firstElement').css("background-image", "some-menu.jpg"); 
$('secondElement').css("background-image", "some-other-menu.jpg"); 
$('lastElement').css("background-image", "big-menu.jpg"); 

Answer 4

esto podría no ser una solución perfecta (ya que es un css-fondo y no una imagen), pero YUI Image loader proporciona una buena forma de imágenes perezoso de carga.

Crear un grupo

var imgGroup = new YAHOO.util.ImageLoader.group(window, 'load', 2); 

vez que el documento se haya cargado, la imagen se cargará 2 segundos después de ella. Consulte Yahoo! Shine o examples para la demostración.

Answer 5

Otra solución es dividir sus activos en diferentes dominios, los navegadores solo solicitarán dos activos al tiempo y luego esperarán que se cargue uno antes de comenzar el siguiente. Puede observar esto con Firebug y YSlow, por lo que coloca algunos recursos en images.example.com e images1.example.com y vea si eso tiene un impacto

Answer 6

El orden de descarga no se puede controlar utilizando css. Sin embargo, puedes usar javascript para lograr esto.

Aunque no se relaciona directamente con la pregunta, quizás antes de hacer eso, debe optimizar la imagen usando smush.o su programa de imagen favorito, los jpegs se ven muy bien cuando se guardan con un 85% de calidad. Experimenta y no te olvides de configurar tu servidor web para que guarde en caché las imágenes durante largos periodos y luego el problema será la primera vez que tus usuarios accedan al sitio.

Answer 7

El truco de Jason para Javascript funcionó para resolver este problema. Sin embargo, tuve que corregir la sintaxis ligeramente:

function loadBG(){ 
    document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)"; 
} 
window.onload=loadBG();