Slide de imgs de fondo

[DragonX]

Hola amigos, estoy teniendo un problema y JS la verdad no es mi fuerte para nada...
les cuento tengo un sitio con un slide de imagenes de fondo con un intervalo, esto anda perfecto.

El tema, el cual no puedo resolver, es que cuando carga el sitio el fondo queda sin imagenes, hasta que pasan X segundos de la variable (var speed=10000) y luego arranca el slide. A mayor numero mas es lo que tarda en cargar la primera img.

Mi pregunta es, como puedo modificar este JS para que de movida me traiga una imagen de fondo asi queda hasta que arranca el slide?

El codigo que estoy utilizando es este:

Código Javascript:

//Background Image Slideshow- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com
 
//Specify background images to slide
var bgslides=new Array()
bgslides[0]="images/backgrounds/bgimage_01.jpg"
bgslides[1]="images/backgrounds/bgimage_02.jpg"
//bgslides[2]="images/backgrounds/bgimage_02.jpg"
 
//Specify interval between slide (in miliseconds)
var speed=10000
 
//preload images
var processed=new Array()
for (i=0;i<bgslides.length;i++){
processed[i]=new Image()
processed[i].src=bgslides[i]
}
 
var inc=-1
 
function slideback(){
if (inc<bgslides.length-1)
inc++
else
inc=0
document.body.background=processed[inc].src
}
 
if (document.all||document.getElementById)
window.onload=new Function('setInterval("slideback()",speed)')
 

Agradeceria cualquier ayuda, mil gracias
Slds

[IsaBelM]

así, de pronto se me ocurre que de inicio tenga cargado como background una imagen, y cuando pasen los 10 segundo cargue el primer elemento del array. pero seguro que esto ya se te ha ocurrido

[caricatos]

Hola:

¿Cómo está Dragón...? ¡Que poco se te ve por estos lares!

¡Qué poco me gustan los scripts de terceros...!"

Solo necesitas poner antes o después del setInterval en la implementación del onload, asignar al background el último elemento del array... (mejor el primero)

window.onload = function{
document.body.background=processed[0].src;
setInterval(slideback, speed);
}

Luego la variable inc (mejor sería otro nombre de variable), la inicializas a 0, y lor último:

function slideback(){
document.body.background=processed[inc++ % bgslides.length].src;
}

Supongo que si no cometí errores escribiendo, te tiene que funcionar (más o menos así los suelo hacer para mi...

Nota... Un tirón de orejas por no usar estilos

Saludos

[DragonX]

caricatos jajajaja mil gracias por responder!!! No estoy utilizando CSS porque es algo que hizo un tercero... :( imaginate yo JS nada!!!!

Te pido mil disculpas, se que tu explicaciòn es excelente, pero la verdad me siento un estupido porque no se donde poner cada cosa que me explicaste!!! perdon......

mira, hice esto:

Código Javascript:

//Background Image Slideshow- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com
 
//Specify background images to slide
var bgslides=new Array()
bgslides[0]="images/backgrounds/bgimage_01.jpg"
bgslides[1]="images/backgrounds/bgimage_02.jpg"
//bgslides[2]="images/backgrounds/bgimage_02.jpg"
//Specify interval between slide (in miliseconds)
var speed=20000
 
//preload images
var processed=new Array()
for (i=0;i<bgslides.length;i++){
processed[i]=new Image()
processed[i].src=bgslides[i]
}
 
var inc=-1
 
function slideback(){
if (inc<bgslides.length-1)
inc++
else
inc=0
document.body.background=processed[inc].src
}
 
if (document.all||document.getElementById)
window.onload=new Function('setInterval("slideback()",speed)')
 
window.onload = function{
    document.body.background=processed[0].src;
    setInterval(slideback, speed);
}
 

creo que hice cualquier cosa, perdoname se que la idea no es copiar y pegar codigo, sino entender lo que uno esta haciendo para futuros problemas, pero esto es algo que quema mis manos y me gustaria si copiar y pegar

Mil gracias si podes darme una mano mas con esto.
un abrazo!

[caricatos]

Hola:

Bueno, vayamos por partes (como dijo Jack "the striper"), el onload salta cuando ya está cargada la página, y por supuesto, está totalmente asignado el array de las imágenes (no tenemos certeza de que estén las imagenes totalmente cargadas, pero sí sus urls)

El elemento del array con índice 0,es el primero en ser asignado, o sea que debería ser el primero en cargarse (si necesitas saberlo con certeza, deberíamos trabajar algo más), o sea que si ese elemento se asigna al cargarse la página, lo que pueda tardar en mostrarse es un tiempo mínimo.
El resto es como ya tenías, sumarle uno al contador. La variante que puse antes solo evita la comparación... te cuento:

si el array es de 5 elementos, cuando haces inc++ % 5, al llegar a cinco devuelve 0, pero inc sigue incrementándose. O sea por cada múltiplo de 5 devuelve 0 (0, 5, 10, 15...)

De todos modos, el error fué mío por copiar y pegar...

var inc = 0;

function slideback(){
document.body.background=processed[inc++ % processed.length].src
}

window.onload = function() {
document.body.background=processed[0].src;
setInterval(slideback, speed);
}

Fíjate que no puse el juego de paréntesis en la función del onload.

Saludetes

[DragonX]

caricatos el que sabe, sabe no hay nada que hacer

un millon de gracias amigazo!
un abrazo grande!

[IsaBelM]

solo lo hace quien quiere escuchar

body {background:url('img incio la última del ciclo');}

document.body.style.backgroundImage="url(" + processed[inc].src + ")";

[DragonX]

para no herir susceptibilidades, algo muy comun en este foro, quiero agradecer la ayuda incondicional y altamente util de IsaBelM

gracias totales!