Sign up with your email address to be the first to know about new products, VIP offers, blog features & more.

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:

var imagen = new Image();
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

<!doctype html>

<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í.

Leer entrada anterior
Lo mejor de mi RSS del 18 al 24 de abril

Mitos de HTTPS y la navegación segura - Security By Default LaTeX Beginner’s Guide - Ubuntips Grubeco: Script para recuperar...

Cerrar