Cambiar background-image de un div con jQuery

Hola a todos,

Tengo un div con un fondo y al pasar el mouse por encima cambia el fondo. El efecto funciona. Pero el problema que tengo es que, en el unico navegador que se ve perfecto es en Opera. En el resto de navegadores; Crhome, Firefox, IE9, Maxthom y Safari, cuando paso el mouse por encima cambia el fondo pero antes me hace un destello incomodo. ¿Como puedo solucionar este problema?

El codigo jQuery que tengo es el siguiente;

$(document) .ready (function () {
$(".contenedor").css ({'background-image': 'url(fondo_2.jpg)' })
});

Este codigo funciona perfecto, lo unico malo es el destello en algunos navegadores.

Muchas gracias por su ayuda.

Perdon.
Este si es el codigo:

$(document) .ready (function () {
/*Cambio de imagen de fondo*/
$(".contenedor").hover(function(){
$(".contenedor").css({'background-image':'url(fondo_2.jpg)'})
});
});

Seguramente te hace ese destello porque es una imagen grande o pesada y no esta cargada.

Si es cierto, también pense lo mismo. Pero como hago para cargar esa imagen, o para que se cargue antes de los efectos?

gracias por tu respuesta.

Puedes hacer un sprite con imágenes de fondo, es decir pones las 2 fondos en una misma imagen, uno al lado del otro, luego con jquery mueves el fondo de posición en vez de cambiar la imagen.

si no sabes de que hablo, busca css sprites en google.

Gracias por tu ayuda.

Lo probaré y luego te cuento.