retrasando la carga de una cierta image de background CSS

en un CSS como este:

... #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 alguna forma de retrasar la carga de la image de background de #big-menu , para que se cargue después de todo lo demás, incluidas todas las imágenes en el HTML, y cualquier otro background CSS (el 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 background que tienen un mejor uso que eso. (como los que se usan en los botones)

¿El order 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.

    7 Solutions collect form web for “retrasando la carga de una cierta image de background CSS”

    El order en css no controla qué resources se cargan primero, pero sí qué estilo existente se sobrescribe o se henetworkinga.

    Pruebe el evento de carga de JavaScript. 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(); 

    Puede que esta no sea una solución perfecta (ya que es un background CSS y no una image), pero el cargador de imágenes YUI proporciona una buena manera de cargar imágenes de carga lenta.

    Crear un grupo

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

    Después de que el documento se haya cargado, la image se cargará 2 segundos después. Ver Yahoo! Brillo o los ejemplos para demostración.

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

    No creo que la location en la hoja de estilo lo afecte, ya que el order de los elementos a los que se aplica decidirá qué image se cargará primero.

    Sin embargo, podría usar jQuery para cargar las imágenes en la secuencia correcta

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

    EDITAR: Bien, entonces quizás en lugar de agregar una class, una mejor solución sería agregar las imágenes de background en time 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"); 

    Controlar cuándo se carga una image en CSS no es realmente posible. Podría tratar de ponerlo en la parte inferior de su StyleSheet, pero dudo que vea una mejora.

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

    Aunque no está directamente relacionado con la pregunta, quizás antes de hacerlo, debe optimizar la image utilizando smush.it o su progtwig de image favorito. Los jpegs se ven muy bien cuando se guardan con un 85% de calidad. Experimenta y no te olvides de configurar tu server web para que guarde en caching las imágenes durante largos períodos y luego el problema será la primera vez que tus usuarios accedan al sitio.

    El truco de Jason para Javascript me ayudó a resolver este problema. Sin embargo, tuve que corregir la syntax levemente:

     function loadBG(){ document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)"; } window.onload=loadBG(); 
    Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.