Colocando el fondo de la imagen usando Jquery causando un tipo de efecto parpadeante

Question

Follwing es la parte del script que estoy usando para crear un control deslizante al cambiar la imagen de fondo para cada objeto de imagen que tengo para un ciclo de tiempo.

 #Sliderimg - height is 500px, 

     $("#Sliderimg").css({ 
      "background-image": "url(../Images/" +SliderImageObj.image + ")", 
      "display": "block", 
      "z-index": "50px" 
     }); 

¿Qué podría haber ido mal con esto ya que estoy obteniendo el efecto parpadeante cada vez que cambio la imagen? Mi problema no está con la nueva imagen a punto de cargar, parpadea (parpadea en la parte inferior de la pantalla) para la imagen anterior que está a punto de ser reemplazada.

Answer 1

¿Tal vez eliminar "px" de su atributo z-index? Toma valores decimales.

Answer 2

Ve un parpadeo porque cada vez que cambia la imagen de fondo, su navegador debe descargarla antes de que pueda mostrar el fondo. Si las imágenes no son demasiado grandes (más que, digamos, 5kb) puede intentar almacenarlas en el navegador mediante su aplicación a elementos donde no aparecerán.

Además, 50px no es un índice z válido, esa propiedad solo requiere enteros.

Answer 3

el navegador se ve obligado a volver a dibujar todo el fondo.

cómo se hace esto configurando el fondo en blanco y luego redibujando el nuevo fondo.

use jquery.animate() para combatir esto.

Answer 4

Tuve el mismo problema el otro día. Por extraño que parezca, parecía estar bien en FF, pero parpadearía en IE, Chrome y, a veces, Safari. La solución es usar una hoja de sprite css. Usted crea una imagen que tiene ambos fondos uno al lado del otro. Solo muestra una parte de la hoja de fondo. puedes alternar ajustando el margen en el fondo. Puede manejar los ajustes de margen usando addClass y removeClass. A continuación se muestra el código, ver aquí para un violín: http://jsfiddle.net/fMhMY/

CSS

.navButton span{ 
width:32px; 
height:32px; 
display:block; 
} 

a.leftButton span, a#leftButton span{ 
background-image:url(Prev.png); 
background-position:-64px 0px; 
} 

/*nav button sprites */ 

/*sprite order is pushed, hover, natural */ 

a.leftButton.navOver span, a.rightButton.navOver span{ 
background-position:-32px 0px; 
} 

a.leftButton.navPressed span, a.rightButton.navPressed span{ 
background-position:0px 0px; 
} 

HTML

<div style='display:inline-block'> 
    <a href="javascript:void(0);" class="leftButton navButton" id='lefty'> 
     <span></span> 
    </a> 
</div> 

jQuery

$('.leftButton').mousedown(function() { 

     $('.leftButton').addClass('navPressed'); 
     console.log('mousedown'); 

}); 
$('.leftButton').mouseup(function() { 
     $('.leftButton').removeClass('navPressed'); 
     console.log('mouseup'); 
}); 

$('.leftButton').hover(function() { 
     $('.leftButton').addClass('navOver'); 
     console.log('hover'); 
}); 


$('.leftButton').mouseout(function() { 
     $('.leftButton').removeClass('navPressed').removeClass('navOver'); 
     console.log('mouseout'); 
});