Demora en javascript

[Alexis88]

La verdad es que noto muy ineficiente y poco práctica la forma en que haces el cambio, llamas a una función varias veces en dos loops para hacer algo que podrías hacer en menos líneas y sin utilizar tantos recursos de sistema.

Código HTML:

<img class = "ejemplo" src = "imagen1.jpg" />
<img class = "ejemplo" src = "imagen2.jpg" />
<img class = "ejemplo" src = "imagen3.jpg" />
 

Código Javascript:

var imagenes = document.getElementsByClassName("ejemplo"),
    total = imagenes.length,
    posicion = 0,
    cambiar = function (){
        imagenes[posicion].style.opacity = 0;
        posicion = posicion == total - 1 ? 0 : ++posicion;
        imagenes[posicion].style.opacity = 1;
    };
 
imagenes[posicion].style.opacity = 1;
setInterval(cambiar, 3000);
 

Código CSS:

.ejemplo{
    position: absolute;
    opacity: 0;
    transition: .75s;
}
 

En el documento, tenemos 3 elementos de imagen con la clase "ejemplo", mientras que en el código JS, tomamos a dichos elementos por su clase, obtenemos el total de elementos, declaramos un contador que empezará en cero y una función que hará el cambio de imágenes. Cuando haya cargado la ventana, se muestra a la primera imagen y con el método setInterval, ejecutaremos la función previamente creada cada 3 segundos (3000 milisegundos). En la función, ocultamos a la imagen actual y actualizamos el valor del contador; si es igual a la posición que ocupa la última imagen en el array imagenes (el total menos uno), le asignamos el valor cero para que se muestre la primera imagen, creando así un efecto de carrusel, pero si todavía no alcanza a dicho valor, incrementamos su valor en uno, mostrando así a la siguiente imagen en la secuencia. Finalmente, mostramos a la imagen que corresponda con el valor actualizado del contador.

Como veo que utilizar la propiedad filter para IE, te sugiero que adaptes ese ejemplo a lo que necesitas. Lo mismo va para el método getElementsByClassName, el cual solo tiene soporte desde IE9. Para ese caso, puedes hacer lo siguiente:

Código Javascript:

var elementos = document.getElementsByTagName("img"),
    total = elementos.length,
    imagenes = [];
 
for (var i = 0; i < total; i++)
    if (elementos[i].className == "ejemplo")
        imagenes.push(elementos[i]);
 
var totalImagenes = imagenes.length;
 

Un ejemplo en ejecución:



Nota: Hago el filtrado por la clase y no por el tipo de elemento pues pueden haber más imágenes en el documento y éstas se verían afectadas.

Saludos