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

107

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 d'image appellera une URL de suivi (telle qu'Omniture) et doit être simple et robuste et fonctionner uniquement dans IE 6 = <. 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 JavaScript brut.

javascript dhtml Pete
la source

2

Définissez «meilleur». Le plus rapide? Le plus simple?

Andrew Hedges

1

@steveniseki il a utilisé en.wikipedia.org/wiki/Hungarian_notation

Iiridayn

82

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

pxest pour CSS uniquement. Utilisez soit:

oImg.width = '1';

pour définir une largeur via HTML, ou:

oImg.style.width = '1px';

pour le définir via CSS.

Notez que les anciennes versions d'IE ne créent pas une image appropriée avec document.createElement(), et les anciennes versions de KHTML ne créent pas un nœud DOM approprié avec new Image(), donc si vous voulez être entièrement rétrocompatible, utilisez quelque chose comme:

// 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 également un peu document.body.appendChildsi 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 avez besoin de pouvoir l'ajouter au moment du chargement (mais après le <body>démarrage de l' élément), vous pouvez essayer de l'insérer au début du corps en utilisant body.insertBefore(body.firstChild).

Pour ce faire de manière invisible tout en conservant l'image chargée dans tous les navigateurs, vous pouvez insérer un élément absolument positionné hors de la page en <div>tant que premier enfant du corps et y placer toutes les images de suivi / préchargement que vous ne voulez pas voir. .

bobince
la source

4

Cela ne new Image()fonctionnerait -il pas mieux en toutes circonstances?

Alexis Wilke

52

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

Tad
la source

19

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

Michael L Perry
la source

@AndreiCristianProdan À utiliser console.logentre chaque paire de lignes, afin que vous sachiez exactement quelle ligne la bloque.

Rodrigo

12

jQuery:

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

J'ai trouvé que cela fonctionne encore mieux parce que 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 JS):

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

Darryl Hein
la source

24

Il n'a spécifiquement demandé aucun jQuery.

Alex

2

De plus, l'analyse du texte en code est inutile, inefficace et tout simplement paresseuse. Quiconque lit ceci, évitez de le faire comme ça. Je veux dire, si vous insérez un littéral <img ... />dans DOM, faites-le avec innerHTML alors. Je ne comprends tout simplement pas ceci: /

aexl

7

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' />";

Au fait, innerHTML n'est pas si mal

Binny VA
la source

2

J'utilisais cette méthode pour une grille d'images 50x50. Lorsque j'ai essayé la méthode d'ajout ci-dessus, mon temps d'exécution est passé de 150 ms à 2250 ms. Je pense donc que innerHTML est beaucoup plus efficace.

Nicholas

4

Chemin le plus court:

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

aemkei
la source

2

S'il n'est pas ajouté au document, il n'est pas certain que l'image src soit récupérée du tout (en fonction du navigateur).

bobince

1

quelqu'un a-t-il des cas de navigateurs qui ne récupèrent pas cette image s'ils ne sont pas attachés au DOM?

antoine129

2

J'ai testé cela dans IE, FF, Chrome et Safari - tous chargent l'image sans qu'elle soit ajoutée au DOM. Est-ce un problème avec les anciens navigateurs?

Seanonymous

3

Êtes-vous autorisé à utiliser un framework? jQuery et Prototype rendent ce genre de chose assez facile. Voici un exemple en prototype:

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

swilliams
la source

3

vous pouvez simplement faire:

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

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

Facile :)

Nitin Bansal
la source

2

Juste pour ajouter un exemple JS HTML complet

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

0

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

Leandro López
la source

0

C'est la méthode que je suis pour créer une boucle de balises img ou une seule balise à votre guise

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
la source

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

Réponses: