Búsqueda de sitios web

dhtml - ¿Cuál es el mejor código JavaScript para crear un elemento img?

Quiero crear un pequeño código JS que cree un elemento de imagen en segundo plano y no muestre nada. El elemento de imagen llamará a una URL de seguimiento (como Omniture) y necesita ser simple y robusto y funcionar solo en IE 6 o versiones anteriores. Aquí está el código que tengo:

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 manera más sencilla pero también la más robusta (libre de errores) de hacerlo?

No puedo usar un framework como jQuery. Necesita estar en JavaScript puro.

Respuesta #1

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

px es solo para CSS. Usa cualquiera de:

oImg.width = '1';

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

oImg.style.width = '1px';

configurarlo a través de CSS.

Tenga en cuenta que las versiones antiguas de IE no crean una imagen correcta con document.createElement(), y las versiones antiguas de KHTML no crean un Nodo DOM correcto con new Image(), así que si desea ser completamente compatible con versiones anteriores, use 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 precaución con document.body.appendChild si el script puede ejecutarse mientras la página se encuentra en medio de la carga. Puede terminar con la imagen en un lugar inesperado, o un error extraño de JavaScript en IE. Si necesita poder agregarla en tiempo de carga (pero después de que el elemento <body> haya comenzado), podría intentar insertarla al inicio del body usando body.insertBefore(body.firstChild).

Para hacer esto de forma invisible pero aún así lograr que la imagen se cargue en todos los navegadores, podrías insertar un <div> absolutamente posicionado fuera de la página como el primer hijo del cuerpo y poner allí cualquier imagen de seguimiento/carga previa que no quieras que sea visible.

Respuesta #2

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

Respuesta #3

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

Respuesta #4

Solo por el bien de la completitud, sugeriría usar también la forma InnerHTML, aunque no llamaría a eso la mejor manera...

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

Por cierto, innerHTML no es tan malo

Respuesta #5

jQuery :

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

He descubierto que esto funciona incluso mejor porque no tienes que preocuparte por escapar nada de HTML (lo cual debería hacerse en el código anterior, si los valores no estuvieran codificados de manera fija). También es más fácil de leer (desde una perspectiva de JS):

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

Artículos relacionados