Transicion de imagenes con alpha (fade)

Saludos amigos de clab!!

Tengo un script que me cambia la imagen de fondo de un div cada 4 segundos, pero necesesito agregarle una transicion en alpha (o fade) para que el cambio entre imagenes no sea tan duro.

Aca esta lo que tengo actualmente

http://zorpstudio.cl/cloverdale/

y este es el codigo que hace el cambio de imagenes

Código Javascript :

<script>

var bgimage=new Array()
bgimage[0]="images/img_home_01.jpg"
bgimage[1]="images/img_home_02.jpg"
bgimage[2]="images/img_home_03.jpg"
bgimage[3]="images/img_home_03.jpg"


var abc=-1

function t(){
if (abc<bgimage.length-1)
abc++
else
abc=0
  document.getElementById("container_home").style.background = 'url("'+bgimage[abc]+'")';
}


window.onload = load;

function load()
{
   setInterval("t()",4000); //change every 4 seconds, can be 
}

</script>

Muchas gracias por su ayuda!!
saludos desde Chile

Usando JQuery te facilitaría mucho las cosas pero si quieres prescindir de él el "truco" consistiría en variar dinámicamente la propiedad opacity de las imágenes (bajando la vieja y subiendo la nueva). Pero para ello primero deberías modificar completamente la galería porque las imágenes ya deben estar cargadas en la página porque evidentemente hay un momento en el que se muestran dos imágenes al mismo tiempo y como un elemento solo puede tener un background en un momento determinado, para lograr el efecto debes tener dos elementos con cada uno de los backgrounds (el que va desapareciendo y el que va apareciendo).

Claro, todo esto es según me lo imagino yo .

Finalmente lo he solucionado cambiando las imágenes con una transición fadein de jquery

ademas le agregue un scrip para que la pagina aparezca con un efecto fade cuando entramos!!

http://www.zorpstudio.cl/cloverdale/

Código :

<script>

var bgimage=new Array()
bgimage[0]="images/img_home_02.jpg"
bgimage[1]="images/img_home_03.jpg"
bgimage[2]="images/img_home_01.jpg"



var abc=-1

function t(){
if (abc<bgimage.length-1)
   abc++
else
   abc=0
   
   $('#transitionDiv').fadeIn("slow",function(){
      document.getElementById("container_home").style.background = 'url("'+bgimage[abc]+'")';
      $('#transitionDiv').fadeOut("slow");
   });
   
}


window.onload = load;

function load()
{
   setInterval("t()",6000); //change every 4 seconds, can be 
}

</script>

<script type="text/javascript">
$(document).ready(function(){
  $(document).ready(function () {
    $('#container_home').fadeIn(1200);
  });
});
</script>

ahora, lo que no se es como hacer una precarga previa de la imágenes mientras me muestra la primera, porque la primera vez que hace la transición se demora en cargar un poco la imagen.

No creo que poner las imágenes como fondo sea la mejor opción para crear un slide, precisamente por que se van cargando a medida que vas haciendo la transición y por eso no se ve bien.

Normalmente en estos casos se ponen las imágenes dentro de una lista desordenada y con posición absoluta se ubican todas apiladas una encima de la otra, con esto logramos que se carguen todas al mismo tiempo y luego solo es cuestión de mostrarlas u ocultarlas en un orden determinado.

Algo así:

Código HTML :

<ul>
    <li><img src="iamgen1.jpg" alt="" /></li>
    <li><img src="iamgen2.jpg" alt="" /></li>
    <li><img src="iamgen3.jpg" alt="" /></li>
    <li><img src="iamgen4.jpg" alt="" /></li>
</ul>