Qual é o melhor código JavaScript para criar um elemento img

107

Quero criar um bit simples de código JS que cria um elemento de imagem em segundo plano e não exibe nada. O elemento de imagem chamará um URL de rastreamento (como Omniture) e precisa ser simples e robusto e funcionar no IE 6 = <apenas. Aqui está o código que tenho:

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);

Esta é a maneira mais simples, mas mais robusta (sem erros) de fazer isso?

Não posso usar um framework como o jQuery. Ele precisa estar em JavaScript simples.

javascript dhtml

— Pete
fonte

2

Defina "melhor". O mais rápido? Mais simples?

— Andrew Hedges,

1

@steveniseki ele usou en.wikipedia.org/wiki/Hungarian_notation

— Iiridayn

82

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

pxé apenas para CSS. Use:

oImg.width = '1';

para definir uma largura por meio de HTML ou:

oImg.style.width = '1px';

para configurá-lo por meio de CSS.

Observe que as versões antigas do IE não criam uma imagem adequada com document.createElement(), e as versões antigas do KHTML não criam um Nó DOM adequado com new Image(), então se você quiser ser totalmente compatível com versões 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;
}

Também tenha um pouco de cuidado document.body.appendChildse o script pode ser executado quando a página está no meio do carregamento. Você pode acabar com a imagem em um lugar inesperado ou um erro estranho de JavaScript no IE. Se você precisar adicioná-lo no momento do carregamento (mas depois que o <body>elemento for iniciado), poderá tentar inseri-lo no início do corpo usando body.insertBefore(body.firstChild).

Para fazer isso de forma invisível, mas ainda com a imagem realmente carregada em todos os navegadores, você pode inserir uma posição absolutamente fora da página <div>como o primeiro filho do corpo e colocar quaisquer imagens de rastreamento / pré-carregamento que você não deseja que sejam visíveis lá .

— bobince
fonte

4

Não new Image()funcionaria melhor em todas as circunstâncias?

— Alexis Wilke

52

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

— Tad
fonte

19

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

— Michael L Perry
fonte

@AndreiCristianProdan Use console.logentre cada par de linhas, assim você saberá exatamente qual linha está congelando.

— Rodrigo

12

jQuery:

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

Descobri que isso funciona ainda melhor porque você não precisa se preocupar com o escape de nada do HTML (o que deve ser feito no código acima, se os valores não estiverem codificados). Também é mais fácil de ler (da perspectiva JS):

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

— Darryl Hein
fonte

24

Ele especificamente não solicitou jQuery.

— Alex

2

Além disso, analisar texto em código é inútil, ineficaz e simplesmente preguiçoso. Quem quer que leia isso evite fazer assim. Quer dizer, se você está inserindo literal <img ... />no DOM, faça isso com innerHTML então. Eu simplesmente não entendo: /

— aexl

7

Para ser mais completo, eu sugiro usar o método InnerHTML também - embora eu não o chame da melhor maneira ...

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

A propósito, innerHTML não é tão ruim

— Binny VA
fonte

2

Eu estava usando esse método para uma grade de imagens 50x50. Quando tentei o método de anexação acima, meu tempo de execução saltou de 150 ms para 2250 ms. Portanto, estou pensando que o innerHTML é muito mais eficiente.

— Nicholas,

4

Caminho mais curto:

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

— aemkei
fonte

2

Se não for adicionado ao documento, não é certo que o código de origem da imagem seja obtido (dependente do navegador).

— bobince

1

alguém tem casos de navegadores que não buscam essa imagem se não estiverem anexados ao DOM?

— antoine129

2

Eu testei isso no IE, FF, Chrome e Safari - todos carregam a imagem sem que seja anexada ao DOM. Este é um problema com navegadores mais antigos?

— Seanonymous

3

Você tem permissão para usar uma estrutura? jQuery e Prototype tornam esse tipo de coisa muito fácil. Aqui está um exemplo em Prototype:

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

— Swilliams
fonte

3

você poderia simplesmente fazer:

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

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

Simples :)

— Nitin Bansal
fonte

2

Apenas para adicionar um exemplo de JS html completo

<!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
fonte

0

Como outros apontaram, se você tem permissão para usar um framework como o jQuery, a melhor coisa a fazer é usá-lo, pois é muito provável que ele o faça da melhor maneira possível. Se você não tem permissão para usar um framework, então eu acho que manipular o DOM é a melhor maneira de fazer isso (e na minha opinião, a maneira certa de fazer isso).

— Leandro López
fonte

0

Este é o método que sigo para criar um loop de tags img ou uma única tag como desejar

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);

ou

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
fonte