Qual è il miglior codice JavaScript per creare un elemento img

107

Voglio creare un semplice bit di codice JS che crei un elemento immagine in background e non visualizzi nulla. L'elemento immagine chiamerà un URL di tracciamento (come Omniture) e deve essere semplice e robusto e funzionare solo in IE 6 = <. Ecco il codice che ho:

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

È questo il modo più semplice ma più affidabile (privo di errori) per farlo?

Non posso usare un framework come jQuery. Deve essere in semplice JavaScript.

javascript dhtml

— Pete
fonte

2

Definisci "migliore". Più veloce? Più semplice?

— Andrew Hedges,

1

@steveniseki ha usato en.wikipedia.org/wiki/Hungarian_notation

— Iiridayn

82

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

pxè solo per CSS. Usa uno:

oImg.width = '1';

per impostare una larghezza tramite HTML oppure:

oImg.style.width = '1px';

per impostarlo tramite CSS.

Nota che le vecchie versioni di IE non creano un'immagine corretta con document.createElement()e le vecchie versioni di KHTML non creano un nodo DOM appropriato con new Image(), quindi se vuoi essere completamente compatibile con le versioni precedenti usa qualcosa come:

// 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;
}

Fai anche attenzione al fatto document.body.appendChildche lo script possa essere eseguito poiché la pagina è nel mezzo del caricamento. Puoi ritrovarti con l'immagine in un posto inaspettato o uno strano errore JavaScript su IE. Se devi essere in grado di aggiungerlo in fase di caricamento (ma dopo che l' <body>elemento è stato avviato), potresti provare a inserirlo all'inizio del corpo utilizzando body.insertBefore(body.firstChild).

Per fare ciò in modo invisibile ma avere comunque l'immagine effettivamente caricata in tutti i browser, è possibile inserire una posizione fuori pagina <div>in modo assoluto come primo figlio del corpo e inserire le immagini di tracciamento / precaricamento che non si desidera siano visibili lì .

— bobince
fonte

4

Non new Image()funzionerebbe meglio in tutte le circostanze?

— 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 Usa console.logtra ogni coppia di linee, così saprai esattamente quale linea la sta bloccando.

— Rodrigo

12

jQuery:

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

Ho scoperto che funziona ancora meglio perché non devi preoccuparti che HTML sfugga a qualcosa (cosa che dovrebbe essere fatta nel codice sopra, se i valori non fossero hardcoded). È anche più facile da leggere (da una prospettiva JS):

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

— Darryl Hein
fonte

24

Non ha specificamente richiesto jQuery.

— Alex

2

Inoltre, l'analisi del testo in codice è inutile, inefficace e semplicemente pigro. Chiunque legga questo, evita di farlo così. Voglio dire, se stai inserendo letterale <img ... />in DOM, fallo con innerHTML . Semplicemente non capisco: /

— aexl

7

Solo per completezza, suggerirei di utilizzare anche il modo InnerHTML, anche se non lo chiamerei il modo migliore ...

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

A proposito, innerHTML non è poi così male

— Binny VA
fonte

2

Stavo usando questo metodo per una griglia di immagini 50x50. Quando ho provato il metodo di aggiunta di cui sopra, il mio tempo di esecuzione è passato da 150 ms a 2250 ms. Quindi penso che innerHTML sia molto più efficiente.

— Nicholas

4

Via più breve:

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

— aemkei
fonte

2

Se non viene aggiunto al documento, non è certo che l'immagine src verrà recuperata (dipendente dal browser).

— bobince

1

qualcuno ha casi di browser che non recuperano quell'immagine se non è collegata al DOM?

— antoine129

2

L'ho testato in IE, FF, Chrome e Safari: tutti caricano l'immagine senza che venga aggiunta al DOM. È un problema con i browser meno recenti?

— Seanonymous

3

Sei autorizzato a utilizzare un framework? jQuery e Prototype rendono questo genere di cose piuttosto semplice. Ecco un esempio in Prototype:

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

— swilliams
fonte

3

potresti semplicemente fare:

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

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

Semplice :)

— Nitin Bansal
fonte

2

Solo per aggiungere l'esempio completo di JS HTML

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

Come altri hanno sottolineato, se ti è permesso usare un framework come jQuery, la cosa migliore da fare è usarlo, poiché molto probabilmente lo farà nel miglior modo possibile. Se non ti è permesso usare un framework, immagino che manipolare il DOM sia il modo migliore per farlo (e secondo me il modo giusto per farlo).

— Leandro López
fonte

0

Questo è il metodo che seguo per creare un ciclo di tag img o un singolo tag come desideri

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
fonte