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

107

Quiero crear un código JS simple que cree un elemento de imagen en el fondo y no muestre 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:

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 más sencilla pero más sólida (sin errores) de hacerlo?

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

javascript dhtml Pete
fuente

2

Defina "mejor". ¿Lo más rápido? ¿Más simple?

Andrew Hedges

1

@steveniseki usó en.wikipedia.org/wiki/Hungarian_notation

Iiridayn

82

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

pxes solo para CSS. Utilizar cualquiera:

oImg.width = '1';

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

oImg.style.width = '1px';

para configurarlo 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 un Nodo DOM adecuado con new Image(), por lo que si desea ser totalmente 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 cuidado con document.body.appendChildsi el script puede ejecutarse ya que la página está en 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 tiempo de carga (pero después de que el <body>elemento haya comenzado), puede intentar insertarlo al comienzo del cuerpo usando body.insertBefore(body.firstChild).

Para hacer esto de manera invisible pero aún así tener la imagen cargada en todos los navegadores, puede insertar una posición absolutamente fuera de la página <div>como el primer hijo del cuerpo y poner cualquier imagen de seguimiento / precarga que no desee que sea visible allí. .

bobince
fuente

4

¿No new Image()funcionaría mejor en todas las circunstancias?

Alexis Wilke

52

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

Tad
fuente

19

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

Michael L. Perry
fuente

@AndreiCristianProdan Úselo console.logentre cada par de líneas, para que sepa exactamente qué línea la está congelando.

Rodrigo

12

jQuery:

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

Descubrí que esto funciona incluso mejor porque no tienes que preocuparte de que HTML escape nada (lo que debería hacerse en el código anterior, si los valores no estaban codificados). También es más fácil de leer (desde la perspectiva de JS):

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

Darryl Hein
fuente

24

Específicamente no solicitó jQuery.

Alex

2

Además, analizar el texto en código es inútil, ineficaz y simple y perezoso. Quien lea esto, evite hacerlo así. Quiero decir, si estás insertando literalmente <img ... />en DOM, hazlo con innerHTML entonces. Simplemente no entiendo esto: /

aexl

7

Solo en aras de la integridad, sugeriría usar la forma InnerHTML también, aunque no la llamaría la mejor manera ...

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

Por cierto, innerHTML no es tan malo

Binny VA
fuente

2

Estaba usando este método para una cuadrícula de imágenes de 50x50. Cuando probé el método de adición anterior, mi tiempo de ejecución saltó de 150 ms a 2250 ms. Entonces estoy pensando que innerHTML es mucho más eficiente.

Nicholas

4

Camino más corto:

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

aemkei
fuente

2

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

bobince

1

¿Alguien tiene casos de navegadores que no obtienen esa imagen si no se adjunta al DOM?

antoine129

2

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

Seanonymous

3

¿Está permitido utilizar un marco? jQuery y Prototype facilitan este tipo de cosas. Aquí hay una muestra en Prototype:

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

swilliams
fuente

3

simplemente podrías hacer:

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

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

Sencillo :)

Nitin Bansal
fuente

2

Solo para agregar un ejemplo completo de HTML 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>

Vaibs
fuente

0

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

Leandro López
fuente

0

Este es el método que sigo para crear un bucle de etiquetas img o una sola etiqueta como desee

method1 :
    let pics=document.getElementById("pics-thumbs");
            let divholder=document.createDocumentFragment();
            for(let i=1;i<73;i++)
            {
                let img=document.createElement("img");
                img.class="img-responsive";
                img.src=`images/fun${i}.jpg`;
                divholder.appendChild(img);
            }
            pics.appendChild(divholder);

o

method2: 
let pics = document.getElementById("pics-thumbs"),
  imgArr = [];
for (let i = 1; i < 73; i++) {

  imgArr.push(`<img class="img-responsive" src="images/fun${i}.jpg">`);
}
pics.innerHTML = imgArr.join('<br>')
<div id="pics-thumbs"></div>

Gvs Akhil
fuente

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

Respuestas: