Cuál es el mejor código JavaScript para crear un elemento img

Quiero crear un código de JS simple que crea un elemento de imagen en el fondo y no muestra nada. El elemento de imagen llamará a una URL de seguimiento (como Omniture) y debe ser simple y robusto, y funcionar solo en IE 6 = <. Aquí está el código que tengo:Cuál es el mejor código JavaScript para crear un elemento img

var oImg = document.createElement("img"); 
oImg.setAttribute('src', 'http://www.testtrackinglink.com'); 
oImg.setAttribute('alt', 'na'); 
oImg.setAttribute('height', '1px'); 
oImg.setAttribute('width', '1px'); 
document.body.appendChild(oImg);

es esta la forma (libre de errores) más simple pero más robusto para hacerlo?

No puedo usar un framework como jQuery. Debe estar en JavaScript simple.

Fuente

2008-10-22 Pete

Definir "lo mejor". ¿Lo más rápido? ¿Más simple? –

¿por qué llamarlo oImg? –

oImg.setAttribute('width', '1px');

px es sólo CSS. Utilice cualquiera:

oImg.width = '1';

a establecer un ancho a través de HTML, o:

oImg.style.width = '1px';

para ajustar a través de CSS.

Tenga en cuenta que las versiones antiguas de IE no crean una imagen adecuada con document.createElement(), y las versiones antiguas de KHTML no crean una adecuada nodo DOM con new Image(), así que si quieres ser totalmente compatible el uso algo como:

// IEWIN boolean previously sniffed through eg. conditional comments 

function img_create(src, alt, title) { 
    var img = IEWIN ? new Image() : document.createElement('img'); 
    img.src = src; 
    if (alt != null) img.alt = alt; 
    if (title != null) img.title = title; 
    return img; 
}

También tenga un poco de cuidado con document.body.appendChild si el script se puede ejecutar ya que la página está en el medio de la carga. Puede terminar con la imagen en un lugar inesperado o un extraño error de JavaScript en IE. Si necesita poder agregarlo en el momento de la carga (pero después de que el elemento <body> haya comenzado), puede intentar insertarlo al comienzo del cuerpo usando body.insertBefore(body.firstChild).

Para hacer esto de forma invisible, pero la imagen realmente se carga en todos los navegadores, puede insertar <div> como el primer hijo del cuerpo y colocar cualquier imagen de seguimiento/carga previa que no desee para ser visible allí.

Fuente

2008-10-22 18:49:56 bobince

¿No solo 'nueva imagen()' funcionaría mejor en todas las circunstancias? –

¿Se le permite utilizar un marco? jQuery y Prototype hacen que este tipo de cosas sea bastante fácil. He aquí una muestra de Prototipo:

var elem = new Element('img', { 'class': 'foo', src: 'pic.jpg', alt: 'alternate text' }); 
$(document).insert(elem);

Fuente

2008-10-22 17:53:50 swilliams

var img = new Image(1,1); // width, height values are optional params 
img.src = 'http://www.testtrackinglink.com';

Fuente

2008-10-22 17:58:11 Tad

var img = document.createElement('img'); 
img.src = 'my_image.jpg'; 
document.getElementById('container').appendChild(img);

Fuente

2008-10-22 18:08:15

Lo sentimos, "appendChild". Enséñame a no verificar mi código. La respuesta ha sido editada. –

este código, por alguna razón, congela mi navegador –

jQuery:

$('#container').append('<img src="/path/to/image.jpg" 
     width="16" height="16" alt="Test Image" title="Test Image" />');

he encontrado que esto funciona incluso mejor, ya que no tiene que preocuparse acerca de HTML escapar nada (lo cual debería hacerse en el código anterior, si los valores no estaban codificados en forma rígida). También es más fácil de leer (desde una perspectiva JS):

$('#container').append($('<img>', { 
    src : "/path/to/image.jpg", 
    width : 16, 
    height : 16, 
    alt : "Test Image", 
    title : "Test Image" 
}));

Fuente

2008-10-22 18:12:30

+21

Solicitó específicamente no jQuery. – Alex

Además, analizar el texto en el código es inútil, ineficaz y simple vago. Quien lea esto, evite hacerlo así. Quiero decir, si está insertando el literal '' en DOM, hágalo con [innerHTML] (https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) y luego. Simplemente no entiendo esto:/ –

Camino más corto:

(new Image()).src = "http:/track.me/image.gif";

Fuente

2008-10-23 11:04:49 aemkei

Si no se agrega al documento, no es seguro que se recupere el src de la imagen (depende del navegador). – bobince

¿Alguien tiene casos de navegadores que no recogen esa imagen si no están conectados al DOM? – antoine129

He probado esto en IE, FF, Chrome y Safari; todos cargan la imagen sin que se adjunte al DOM. ¿Es esto un problema con los navegadores más antiguos? – Seanonymous

Como otros señalaron si está permitido el uso de un marco como jQuery lo mejor que puede hacer es usarlo, ya que alta es probable que lo haga de la mejor manera posible. Si no puede usar un marco, entonces supongo que manipular el DOM es la mejor manera de hacerlo (y en mi opinión, la forma correcta de hacerlo).

Fuente

2008-10-23 11:14:26

Sólo por el mayor abundamiento, se recomienda usar la forma InnerHTML también - aunque yo no diría que es la mejor manera ...

document.getElementById("image-holder").innerHTML = "<img src='image.png' alt='The Image' />";

Por cierto, innerHTML is not that bad

Fuente

2008-10-23 15:08:37

Estaba usando este método para una grilla de imágenes de 50x50. Cuando probé el método agregado anterior, mi tiempo de ejecución saltó de 150 ms a 2250 ms. Entonces, creo que innerHTML es mucho más eficiente. – Nicholas

simplemente podría hacer:

var newImage = new Image(); 
newImage.src = "someImg.jpg"; 

if(document.images) 
{ 
    document.images.yourImageElementName.src = newImage.src; 
}

simple :)

Fuente

2011-10-15 08:16:58

Sólo t o agregar el ejemplo HTML completo de JS

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>create image demo</title> 
    <script> 


     function createImage() { 
      var x = document.createElement("IMG"); 
      x.setAttribute("src", "http://www.iseebug.com/wp-content/uploads/2016/09/c2.png"); 
      x.setAttribute("height", "200"); 
      x.setAttribute("width", "400"); 
      x.setAttribute("alt", "suppp"); 
      document.getElementById("res").appendChild(x); 
     } 

    </script> 
</head> 
<body> 
<button onclick="createImage()">ok</button> 
<div id="res"></div> 

</body> 
</html>

Fuente

2016-10-22 12:17:37 Vaibs

Cuál es el mejor código JavaScript para crear un elemento img

Respuesta

Cuestiones relacionadas