Carga de imagenes mediante un array en Javascript

La verdad es que esta tarea dio algún que otro dolor de cabeza al principio, ya que "choca" un poco que las imágenes las contenga un array,  pero después de probar lo siguiente todo fue mas fácil.

Creamos un array y lo vamos definiendo con  las rutas relativas de las imágenes (donde se encuentran).

var misImagenes= new Array(3)
  misImagenes [0]= "./img/001.jpg";
  misImagenes [1]= "./img/002.jpg";
  misImagenes [2]= "./img/003.jpg";
  misImagenes [3]= "./img/004.jpg";

Una vez creado el arrray crearemos una pequeña función que nos permita hacer la carga de imágenes, aclarar que para que la función funcione debemos tener una imagen en nuestro código html con el id="imagen":

<img name="imagen" id="imagen" alt="Imagenes">

---

function cargarImagen(){
  document.imagen.src = misImagenes[i];}

Si os fijáis no ha sido necesario utilizar ninguna función DOM para cambiar el "source" de la etiqueta img, simplemente poniendo su id después de "document", aunque si lo hiciéramos con una función DOM quizá quedaría un poco mas claro:

function cargarImagen(){     var imagen = document.getElementById("imagen");     document.imagen.src = misImagenes[i];}

Ya solo nos quedaría implementar una variable "i" al principio del código que tomará valores aleatorios entre 0 y 3 y ya tendríamos una imagen diferente en cada recarga de la pagina, y hecho en Javascript!.

var i = Math.round(Math.random()*3);