Was ist der beste JavaScript-Code zum Erstellen eines IMG-Elements

Ich möchte ein einfaches Bit von JS-Code erstellen, die ein Bildelement im Hintergrund erstellt und nichts anzeigt. Das Bildelement ruft eine Tracking-URL auf (z. B. Omniture) und muss einfach und robust sein und nur in IE 6 = < funktionieren. Hier ist der Code, den ich habe:Was ist der beste JavaScript-Code zum Erstellen eines IMG-Elements

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

Ist dies die einfachste, aber robusteste (fehlerfrei) Weg, es zu tun?

Ich kann ein Framework wie jQuery nicht verwenden. Es muss in einfachem JavaScript sein.

Quelle

2008-10-22 Pete

Definiere "best." Am schnellsten? Einfachste? –

warum nenn es oImg? –

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

px CSS nur. Verwenden Sie entweder:

oImg.width = '1';

eine Breite durch HTML zu setzen, oder:

oImg.style.width = '1px';

es durch CSS zu setzen.

Beachten Sie, dass alte Versionen von IE keine richtige Bild mit document.createElement() und alten Versionen von KHTML erstellen Sie einen richtigen DOM-Knoten mit new Image() nicht erstellen, wenn Sie also wie vollständig rückwärtskompatibel Verwendung etwas sein wollen:

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

Auch vorsichtig sein von document.body.appendChild, wenn das Skript ausgeführt werden kann, wie die Seite in der Mitte des Ladens ist. Sie können mit dem Bild an einem unerwarteten Ort enden, oder ein seltsamer JavaScript-Fehler auf IE. Wenn Sie es zur Ladezeit hinzufügen können (aber nachdem das Element <body> gestartet wurde), könnten Sie versuchen, es am Anfang des Körpers einzufügen, indem Sie body.insertBefore(body.firstChild) verwenden.

Um dies unsichtbar zu tun, aber das Bild tatsächlich in allen Browsern laden, können Sie eine absolut positionierte <div> als das erste Kind des Körpers einfügen und alle Tracking/Preload-Bilder, die Sie nicht wollen darin sichtbar zu sein.

Quelle

2008-10-22 18:49:56 bobince

Würde nicht nur 'new Image()' unter allen Umständen am besten funktionieren? –

Darf man ein Framework verwenden? jQuery und Prototype machen diese Art von Sache ziemlich einfach. Hier ist ein Beispiel in Prototype:

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

Quelle

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

Quelle

2008-10-22 17:58:11 Tad

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

Quelle

2008-10-22 18:08:15

Entschuldigung, "appendChild". Bringen Sie mir bei, meinen Code nicht zu überprüfen. Die Antwort wurde bearbeitet. –

dieser Code, aus irgendeinem Grund friert mein Browser –

jQuery:

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

ich gefunden habe, dass dies noch besser funktioniert, weil Sie nicht über HTML entkommen nichts zu befürchten (was sollte in dem obigen Code getan werden, wenn die Werte nicht fest codiert waren). Es ist auch einfacher zu (von JS Perspektive) zu lesen:

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

Quelle

2008-10-22 18:12:30

+21

Er speziell keine jQuery angefordert. – Alex

Parsen von Text in Code ist sinnlos, ineffektiv und einfach faul. Wer das liest, vermeidet es so. Ich meine, wenn Sie das Literal '' in DOM einfügen, machen Sie es mit [innerHTML] (https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) dann. Ich verstehe das einfach nicht:/ –

Kürzester Weg:

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

Quelle

2008-10-23 11:04:49 aemkei

Wenn es nicht zum Dokument hinzugefügt wird, ist es nicht sicher, dass das Bild src überhaupt abgerufen wird (browserabhängig). – bobince

Hat jemand Fälle von Browsern, die das Bild nicht abrufen, wenn es nicht an das DOM angehängt ist? – antoine129

Ich habe dies in IE, FF, Chrome und Safari getestet - alle laden das Bild, ohne dass es an das DOM angehängt wird. Ist das ein Problem mit älteren Browsern? – Seanonymous

Wie andere darauf hingewiesen, wenn Sie berechtigt sind, ein Framework wie jQuery das Beste, was zu verwenden ist, es zu tun zu verwenden, wie hoch es wahrscheinlich auf die bestmögliche Art und Weise tun. Wenn Sie kein Framework verwenden dürfen, dann ist die Manipulation des DOM der beste Weg (und meiner Meinung nach der richtige Weg dafür).

Quelle

2008-10-23 11:14:26

Nur aus Gründen der Vollständigkeit, würde ich vorschlagen, als auch den Innerhtml-Weg mit - obwohl ich es nicht der beste Weg nennen würde ...

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

By the way, innerHTML is not that bad

Quelle

2008-10-23 15:08:37

Ich habe diese Methode für ein 50x50 Raster von Bildern verwendet. Als ich die obige anhängende Methode versuchte, sprang meine Ausführungszeit von 150ms auf 2250ms. Ich denke also, innerHTML ist viel effizienter. – Nicholas

Sie konnte einfach tun:

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

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

einfach :)

Quelle

2011-10-15 08:16:58

Gerade t o füge html hinzu JS Beispiel

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

Quelle

2016-10-22 12:17:37 Vaibs

Was ist der beste JavaScript-Code zum Erstellen eines IMG-Elements

Antwort

Verwandte Themen