web-dev-qa-db-fra.com

Quel est le meilleur code JavaScript pour créer un élément img

Je veux créer un simple morceau de code JS qui crée un élément d'image en arrière-plan et n'affiche rien. L'élément image appelle une URL de suivi (telle que Omniture) et doit être simple, robuste et fonctionner dans IE 6 = <uniquement. Voici le code que j'ai:

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

Est-ce le moyen le plus simple mais le plus robuste (sans erreur) de le faire?

Je ne peux pas utiliser un framework comme jQuery. Il doit être en clair JavaScript.

javascriptdhtml
94
Pete
oImg.setAttribute('width', '1px');

px est pour CSS seulement. Utilisez soit:

oImg.width = '1';

définir une largeur via HTML, ou:

oImg.style.width = '1px';

pour le définir via CSS.

Notez que les anciennes versions de IE ne créent pas une image correcte avec document.createElement() et que les anciennes versions de KHTML ne créent pas un nœud DOM approprié avec new Image(). Par conséquent, si vous souhaitez être totalement compatible avec les versions antérieures, utilisez:

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

Méfiez-vous aussi légèrement de document.body.appendChild si le script peut s'exécuter car la page est en cours de chargement. Vous pouvez vous retrouver avec l'image dans un endroit inattendu ou une erreur JavaScript étrange sur IE. Si vous devez pouvoir l'ajouter au moment du chargement (mais après le démarrage de l'élément <body>), vous pouvez essayer de l'insérer au début du corps en utilisant body.insertBefore(body.firstChild).

Pour le faire de manière invisible mais que l'image soit toujours chargée dans tous les navigateurs, vous pouvez insérer un <div> absolument positionné en dehors de la page en tant que premier enfant du corps et placer toutes les images de suivi/préchargement pour lesquelles vous ne souhaitez pas être visibles. Là.

73
bobince
var img = new Image(1,1); // width, height values are optional params 
img.src = 'http://www.testtrackinglink.com';
46
Tad
var img = document.createElement('img');
img.src = 'my_image.jpg';
document.getElementById('container').appendChild(img);
14
Michael L Perry

jQuery:

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

J'ai trouvé que cela fonctionnait encore mieux, car vous n'avez pas à vous soucier du HTML qui échappe à quoi que ce soit (ce qui devrait être fait dans le code ci-dessus, si les valeurs n'étaient pas codées en dur). C'est aussi plus facile à lire (du point de vue des JS):

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

Par souci d’exhaustivité, je suggérerais également d’utiliser la méthode InnerHTML - même si je ne l’appellerais pas la meilleure façon ...

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

À propos, innerHTML n’est pas si mauvais que ça

7
Binny V A

Chemin le plus court: 

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

Êtes-vous autorisé à utiliser un framework? jQuery et Prototype rend ce genre de choses assez facile. Voici un exemple dans Prototype:

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

vous pouvez simplement faire:

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

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

Simple :)

3
Nitin Bansal

Juste pour ajouter un exemple complet 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>
1
Vaibs

C’est la méthode que je suis pour créer une boucle de balises img ou une seule balise selon vos souhaits.

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>
0
Gvs Akhil

Comme d'autres l'ont souligné, si vous êtes autorisé à utiliser un framework tel que jQuery, la meilleure chose à faire est de l'utiliser, car high le fera probablement de la meilleure façon possible. Si vous n'êtes pas autorisé à utiliser un framework, alors je suppose que manipuler le DOM est la meilleure façon de le faire (et à mon avis, la bonne façon de le faire).

0
Leandro López