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

Je souhaite créer un simple bit de code JS qui crée un élément d'image en arrière-plan et n'affiche rien. L'élément image appellera une URL de suivi (telle que Omniture) et doit être simple et robuste et fonctionner dans IE 6 = < uniquement. Voici le code que j'ai: cheminQuel est le meilleur code JavaScript pour créer un élément img?

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 plus simple mais plus robuste (sans erreur) pour le faire?

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

Source

2008-10-22 Pete

Définir "meilleur". Le plus rapide? Le plus simple? –

pourquoi l'appeler oImg? –

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

px est pour CSS seulement. Utilisez soit:

oImg.width = '1';

pour définir une largeur par HTML, ou:

oImg.style.width = '1px';

pour le définir par CSS.

Notez que les anciennes versions de IE ne créent pas une image correcte 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 utiliser pleinement rétrocompatible 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; 
}

Soyez également un peu méfiant 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 que l'élément <body> a démarré), vous pouvez essayer de l'insérer au début du corps en utilisant body.insertBefore(body.firstChild). Pour faire ceci de façon invisible mais toujours charger l'image dans tous les navigateurs, vous pouvez insérer un <div> comme premier enfant du corps et placer des images de suivi/préchargement que vous ne voulez pas. être visible là-dedans.

Source

2008-10-22 18:49:56 bobince

"new Image()" ne fonctionnerait-il pas mieux dans toutes les circonstances? –

Etes-vous autorisé à utiliser un framework? jQuery et Prototype rendre ce genre de chose assez facile. Voici un exemple dans Prototype:

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

Source

2008-10-22 17:53:50 swilliams

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

Source

2008-10-22 17:58:11 Tad

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

Source

2008-10-22 18:08:15

Désolé, "appendChild". Apprends-moi à ne pas vérifier mon code. La réponse a été modifiée. –

ce code, pour une raison quelconque fige mon navigateur –

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 de quoi que ce soit échapper HTML (ce qui devrait être fait dans le code ci-dessus, si les valeurs n'étaient pas codées en dur). Il est également 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" 
}));

Source

2008-10-22 18:12:30

+21

Il a spécifiquement demandé pas de jQuery. – Alex

En outre, l'analyse du texte dans le code est inutile, inefficace et paresseux. Celui qui lit ceci, évite de le faire comme ça. Je veux dire, si vous insérez littéralement '' dans DOM, faites-le avec [innerHTML] (https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) puis. Je ne comprends pas:/ –

façon Shortest:

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

Source

2008-10-23 11:04:49 aemkei

S'il n'est pas ajouté au document, il n'est pas certain que l'image src sera récupérée (dépend du navigateur). – bobince

Quelqu'un at-il des cas de navigateurs ne récupérant pas cette image si elle n'est pas attachée au DOM? – antoine129

Je l'ai testé dans IE, FF, Chrome et Safari-tous charger l'image sans qu'il soit ajouté au DOM. Est-ce un problème avec les anciens navigateurs? – Seanonymous

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

Source

2008-10-23 11:14:26

Juste pour être complet, je suggère d'utiliser la voie InnerHTML aussi bien - même si je ne dirais pas que la meilleure façon ...

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

Par ailleurs, innerHTML is not that bad

Source

2008-10-23 15:08:37

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

vous pouvez simplement faire:

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

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

simple :)

Source

2011-10-15 08:16:58

Juste t o ajouter l'exemple complet html JS exemple

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

Source

2016-10-22 12:17:37 Vaibs

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

Répondre

Questions connexes