Was ist der beste JavaScript-Code zum Erstellen eines img-Elements?

107

Ich möchte ein einfaches Stück JS-Code erstellen, das im Hintergrund ein Bildelement erstellt und nichts anzeigt. Das Bildelement ruft eine Tracking-URL (z. B. Omniture) auf und muss einfach und robust sein und nur in IE 6 = <funktionieren. Hier ist der Code, den ich habe:

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 der einfachste, aber robusteste (fehlerfreie) Weg, dies zu tun?

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

javascript dhtml

— Pete
quelle

2

Definieren Sie "am besten". Am schnellsten? Am einfachsten?

— Andrew Hedges

1

@steveniseki er benutzte en.wikipedia.org/wiki/Hungarian_notation

— Iiridayn

82

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

pxist nur für CSS. Benutze das eine oder das andere:

oImg.width = '1';

um eine Breite über HTML festzulegen, oder:

oImg.style.width = '1px';

um es durch CSS einzustellen.

Beachten Sie, dass alte Versionen von IE kein richtiges Image erstellen document.createElement()und alte Versionen von KHTML keinen richtigen DOM-Knoten mit erstellen. new Image()Wenn Sie also vollständig abwärtskompatibel sein möchten, verwenden Sie Folgendes:

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

Seien Sie auch etwas vorsichtig, document.body.appendChildwenn das Skript ausgeführt wird, da sich die Seite gerade im Laden befindet. Sie können mit dem Bild an einem unerwarteten Ort oder einem seltsamen JavaScript-Fehler im IE enden. Wenn Sie es beim Laden hinzufügen müssen (aber nachdem das <body>Element gestartet wurde), können Sie versuchen, es am Anfang des Körpers mit einzufügen body.insertBefore(body.firstChild).

Um dies unsichtbar zu tun und das Bild dennoch in allen Browsern zu laden, können Sie <div>als erstes Kind des Körpers ein absolut positioniertes Bild außerhalb der Seite einfügen und alle Tracking- / Preload-Bilder einfügen , die dort nicht sichtbar sein sollen .

— Bobince
quelle

4

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

— Alexis Wilke

52

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

— Bisschen
quelle

19

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

— Michael L Perry
quelle

@AndreiCristianProdan Verwenden Sie console.logzwischen jedem Zeilenpaar, damit Sie genau wissen, welche Zeile es einfriert.

— Rodrigo

12

jQuery:

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

Ich habe festgestellt, dass dies noch besser funktioniert, da Sie sich keine Sorgen machen müssen, dass HTML irgendetwas entgeht (was im obigen Code erfolgen sollte, wenn die Werte nicht fest codiert waren). Es ist auch einfacher zu lesen (aus JS-Sicht):

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

— Darryl Hein
quelle

24

Er forderte ausdrücklich keine jQuery an.

— Alex

2

Außerdem ist das Parsen von Text in Code sinnlos, ineffektiv und einfach faul. Wer dies liest, vermeidet es so. Ich meine, wenn Sie Literal <img ... />in DOM einfügen , machen Sie es dann mit innerHTML . Ich verstehe das einfach nicht: /

— aexl

7

Der Vollständigkeit halber würde ich vorschlagen, auch den InnerHTML-Weg zu verwenden - auch wenn ich es nicht den besten Weg nennen würde ...

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

InnerHTML ist übrigens gar nicht so schlecht

— Binny VA
quelle

2

Ich habe diese Methode für ein 50x50-Raster von Bildern verwendet. Als ich die oben beschriebene Methode zum Anhängen ausprobierte, sprang meine Ausführungszeit von 150 ms auf 2250 ms. Ich denke also, dass innerHTML viel effizienter ist.

— Nicholas

4

Kürzester Weg:

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

— Aemkei
quelle

2

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

— Bobince

1

Hat jemand Fälle, in denen Browser dieses Bild nicht abrufen, wenn es nicht an das DOM angehängt ist?

— Antoine129

2

Ich habe dies in IE, FF, Chrome und Safari getestet. Alle laden das Bild, ohne es an das DOM anzuhängen. Ist dies ein Problem mit älteren Browsern?

— Seanonymous

3

Dürfen Sie ein Framework verwenden? jQuery und Prototype machen so etwas ziemlich einfach. Hier ist ein Beispiel in Prototype:

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

— Swilliams
quelle

3

Sie könnten einfach tun:

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

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

Einfach :)

— Nitin Bansal
quelle

2

Nur um ein vollständiges HTML-JS-Beispiel hinzuzufügen

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

0

Wie andere betonten, ist es am besten, wenn Sie ein Framework wie jQuery verwenden dürfen, es zu verwenden, da es dies höchstwahrscheinlich bestmöglich tun wird. Wenn Sie kein Framework verwenden dürfen, ist die Manipulation des DOM meiner Meinung nach der beste Weg, dies zu tun (und meiner Meinung nach der richtige Weg, dies zu tun).

— Leandro López
quelle

0

Dies ist die Methode, die ich befolge, um eine Schleife von img-Tags oder ein einzelnes Tag nach Ihren Wünschen zu erstellen

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

oder

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
quelle