Javascript carga background-image asynchrously

Question

¿Es posible cargar una imagen de fondo de forma asíncrona?

he visto muchos jQuery plugins para cargar imagen normal de una manera asíncrona, pero no puedo encontrar si es posible precargar/cargar asyncronously una imagen de fondo.

EDITAR

aclaro mi problema. He estado trabajando en este sitio de prueba http://mentalfaps.com/ La imagen de fondo se carga aleatoriamente a partir de un conjunto de imágenes actualizadas cada hora mediante un trabajo cron (que toma imágenes aleatorias en un catálogo de flickr).

El host es libre y lento en este momento, por lo que la imagen de fondo tarda en cargarse.

El posicionamiento de la primera superposición (el que tiene el logo PNG transparente mentalfaps) y el ancho están regulados por una función creada en el jQuery(document).ready costruct.

Si intenta actualizar la página muchas veces, la anchura de la superposición de la derecha div es 0 (y por lo que ver un "agujero" en el diseño)

Aquí es el método para fijar mis posiciones:

function setPositions(){ 
    var oH = $('#overlay-header'); 
    var overlayHeaderOffset = oH.offset(); 
    var overlayRightWidth = $(window).width() - (overlayHeaderOffset.left + oH.width()); 
    if (overlayRightWidth >= 0) { 
     $('#overlay-right').width(overlayRightWidth); 
    } else { 
     $('#overlay-right').width(0); 
    } 
    var lW = $('#loader-wrapper'); 
    lW.offset({ 
     left: (overlayHeaderOffset.left + oH.width() - lW.width()) 
    }); 
} 

el problema es que el $(window).width() es menor que la anchura efectiva de la ventana! por lo que la verificación falla y el script va por $('#overlay-right').width(0);

alguna idea?

Answer 1

He encontrado la respuesta yo mismo, era un problema debido al método .offset() que a veces daba los valores incorrectos.

que tenía los valores de escritura que utilizan los .position():

var overlayHeaderOffset = oH.position(); 

Answer 2

No estoy seguro de si realmente entiendo su pregunta, pero las imágenes de fondo (y todas las demás imágenes) ya están cargadas de forma asíncrona: el navegador las solicitará por separado tan pronto como encuentre la URL al analizar el HTML.

ver este excelente respuesta para el fondo en el orden de carga: Load and execution sequence of a web page?

Si quería decir algo más, por favor aclarar.

Answer 3

El truco para cargar algo en el fondo es cargarlo una vez, por lo que la próxima vez que se cargue, ya estará en la caché.

poner lo siguiente al final de su html:

<script> 
    var img = new Image(); 
    img.onload = function() { 
     document.getElementsByTagName('body')[0].style.backgroundImage = 'background.png'; 
    }; 
    img.src = 'background.png'; 
</script> 

Answer 4

Se puede usar un enlace de captación previa en la cabeza.

<link rel="prefetch" href="/images/background.jpg"> 

Debe poder agregar estos enlaces a la cabeza a través de JavaScript.

Answer 5

Como ya se mencionó, la imagen de fondo se carga de forma asíncrona. Si necesita cargar la imagen de fondo del código JQuery, también puede configurar el método addClass() para establecer una clase CSS o attr ("style = \" background-image: url ('myimage.png') \ "")

Answer 6

Me gusta usar CSS para rellenar el fondo con un color para cargar la página.

Después del evento listo para DOM, utilizo jQuery para modificar el CSS y agregar una imagen de fondo.De esta forma, la imagen no se carga hasta que se carga la página. No estoy seguro acerca de la sincronización, pero este método le da al usuario una experiencia decente.

Ejemplo: http://it.highpoint.edu/

Los enlaces de navegación del lado derecho tiene una imagen de fondo. La página se inicializa con un color de fondo. Se reemplaza con una imagen de fondo después de cargar la página, a través de jQuery.

Answer 7

cambios en este archivo jquery.ImageOverlay.js

establecer su altura y anchura y disfrutar de esta ...

imageContainer.css({ 
      width : "299px", 
      height : "138px", 
      borderColor : hrefOpts.border_color 
     });