Precargar imagen de fondo

Question

Hay toneladas de artículos sobre cómo precargar una imagen, sin embargo, parece que no puedo encontrar nada útil sobre la precarga de una imagen de fondo con jquery.

Hice un simple maqueta HTML de lo que me gustaría lograr: http://jsfiddle.net/3rfhr/

• un div carga aparece
• fondo se carga
• Cargando div desaparece aparece
• Antecedentes DIV

Puedo manejar las transiciones div pero no tengo ni idea de cómo Debo precargar un fondo CSS. Gracias por leer mi pregunta :)

Answer 1

No se puede, siempre que sea una imagen de fondo. Cargarlo normalmente y luego establecer la imagen de fondo. Algo como esto:

var $img = $('<img src="' + src + '">'); 
$img.bind('load', function(){ 
    $('.yourDiv').css('background-image', 'url(' + src + ')'); 
}); 
if($img[0].width){ $img.trigger('load'); } 

la última línea es necesaria en algún navegador en caso de que la imagen se guarde en caché.

Answer 2

A working example con un simulacro setTimeout para simular el tiempo de carga.

El código relevante jQuery es:

$('#LOADING-SIGN-DIV').fadeOut(); 
$('#DIV-THAT-NEEDS-PRELOADING').fadeIn(); 

Answer 3

Para hacer la precarga, por qué no agarrar la URL del atributo css con jQuery? Algo como esto:

var bg_url = jQuery("#DIV-THAT-NEEDS-PRELOADING").css('background-image'); 

// using regex to replace the " url(...) "... 
// apologies for my noobish regex skills... 
bg_url = str.replace(/ /g, '', bg_url); // whitespace... 
bg_url = str.replace(/url\(["']?/g, '', bg_url); // next, the 'url("'... 
bg_url = str.replace(/["']?\)/g, '', bg_url); // finally, the trailing '")'... 

// without regex, using substring if confident about no quotes/whitespace... 
bg_url = bg_url.substring(4, bg_url.length-1); 

// preloading... 
var img = new Image(); 
img.onload = function() 
{ 
    // do transitions here... 
}; 
img.src = bg_url; 

Answer 4

Su lógica es casi buena, pero no puede detectar eventos para CSS en jquery.

Debe cargar la imagen de fondo en algún elemento <img>. Captura la carga del evento de ese elemento y cuando se dispara, cambias la imagen de fondo a ese src y haces el resto de tu lógica.

Answer 5

Precargando imágenes con CSS y JavaScript, esperamos que estos dos enlaces sean fáciles y útiles.

http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/

http://perishablepress.com/press/2006/11/14/preloading-images-with-css-and-javascript/

Answer 6

Aquí hay un post de la semana pasada que cubría la precarga de imágenes con jQuery: HTML 5 File load image as background-image

Y aquí es la solución que publicar referencia: http://sveinbjorn.org/dataurls_css