Cargar una imagen en JavaScript
A la hora de desarrollar web apps resulta fundamental algún metodo eficaz para cargar imágenes en Javascript. Antes de que el usuario entre en una página es necesario que ésta se cargue por completo. Si en tu aplicación web vas a trabajar con imágenes dinámicas, es decir, que se crean en un momento determinado es fundamental que antes realices la carga en memoria.
Éste es el código que utilizo sin usar ningún tipo de librería:
imagen.onload = imagenCargada;
imagen.src = "ejemplo.png"
En la función imagenCargada es donde ya sé que la imagen ha sido cargada correctamente y puedo proceder a su utilización ya que está almacenada en memoria.
Ejemplo
<html>
<head>
<title>Cargar imagen</title>
<meta charset="utf-8" />
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", inicio, false);
function inicio()
{
var nuevaImagen = new Image();
alert("Se procede a la carga en memoria de la imagen");
nuevaImagen = cargarImagen("ejemplo.png");
}
function cargarImagen(url)
{
var imagen = new Image();
imagen.onload = imagenCargada;
imagen.src = url;
return imagen;
}
function imagenCargada()
{
alert("La imagen se ha cargado correctamente");
}
</script>
</head>
<body>
</body>
</html>
Código fuente del ejemplo
Descarga el código fuente del ejemplo pulsando aquí.
Suscríbete
Síguenos
Contacta
