Jaki jest najlepszy kod JavaScript do utworzenia elementu img

107

Chcę stworzyć prosty fragment kodu JS, który tworzy element obrazu w tle i niczego nie wyświetla. Element obrazu będzie wywoływał link monitorujący (taki jak Omniture) i musi być prosty i solidny oraz działać tylko w IE 6 = <. Oto kod, który mam:

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

Czy jest to najprostszy, ale najbardziej niezawodny (bezbłędny) sposób, aby to zrobić?

Nie mogę używać frameworka takiego jak jQuery. Musi być w prostym języku JavaScript.

javascript dhtml

— Pete
źródło

2

Zdefiniuj „najlepsze”. Najszybszy? Najprostsze?

— Andrew Hedges

1

@steveniseki użył en.wikipedia.org/wiki/Hungarian_notation

— Iiridayn

82

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

pxdotyczy tylko CSS. Użyj:

oImg.width = '1';

aby ustawić szerokość za pomocą HTML lub:

oImg.style.width = '1px';

aby ustawić go przez CSS.

Zauważ, że stare wersje IE nie tworzą właściwego obrazu z document.createElement(), a stare wersje KHTML nie tworzą odpowiedniego węzła DOM z new Image(), więc jeśli chcesz być w pełni kompatybilny wstecz, użyj czegoś takiego:

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

Zachowaj także ostrożność, document.body.appendChildjeśli skrypt może zostać uruchomiony w trakcie ładowania strony. Możesz skończyć z obrazem w nieoczekiwanym miejscu lub dziwnym błędem JavaScript w IE. Jeśli chcesz mieć możliwość dodania go w czasie ładowania (ale po uruchomieniu <body>elementu), możesz spróbować wstawić go na początku treści za pomocą body.insertBefore(body.firstChild).

Aby zrobić to w sposób niewidoczny, ale nadal mieć obraz faktycznie ładowany we wszystkich przeglądarkach, możesz wstawić absolutnie pozycjonowane poza stroną <div>jako pierwsze dziecko ciała i umieścić tam wszystkie obrazy śledzące / wstępnie ładowane, których nie chcesz, aby były widoczne .

— bobince
źródło

4

Czy nie działałby new Image()najlepiej w każdych okolicznościach?

— Alexis Wilke

52

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

— Berbeć
źródło

19

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

— Michael L Perry
źródło

@AndreiCristianProdan Użyj console.logmiędzy każdą parą linii, aby dokładnie wiedzieć, która linia ją zamraża .

— Rodrigo

12

jQuery:

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

Odkryłem, że działa to nawet lepiej, ponieważ nie musisz się martwić o ucieczkę z kodu HTML (co należy zrobić w powyższym kodzie, jeśli wartości nie zostały zakodowane na stałe). Jest też łatwiejszy do odczytania (z perspektywy JS):

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

— Darryl Hein
źródło

24

Specjalnie zażądał braku jQuery.

— Alex

2

Ponadto przetwarzanie tekstu na kod jest bezcelowe, nieefektywne i po prostu leniwe. Ktokolwiek to czyta, unikaj robienia tego w ten sposób. To znaczy, jeśli wstawiasz dosłowny <img ... />do DOM, zrób to z innerHTML . Po prostu nie rozumiem: /

— aexl

7

Ze względu na kompletność sugerowałbym również użycie metody InnerHTML - chociaż nie nazwałbym tego najlepszym sposobem ...

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

Nawiasem mówiąc, innerHTML nie jest takie złe

— Binny VA
źródło

2

Używałem tej metody do siatki obrazów 50x50. Kiedy wypróbowałem powyższą metodę dołączania, mój czas wykonania skoczył z 150 ms do 2250 ms. Więc myślę, że innerHTML jest znacznie wydajniejsze.

— Nicholas

4

Najkrótsza droga:

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

— aemkei
źródło

2

Jeśli nie zostanie dodany do dokumentu, nie ma pewności, że źródło obrazu zostanie w ogóle pobrane (zależne od przeglądarki).

— bobince

1

czy ktoś ma przypadki, w których przeglądarki nie pobierają tego obrazu, jeśli nie są dołączone do DOM?

— antoine129

2

Testowałem to w IE, FF, Chrome i Safari - wszystkie ładują obraz bez dołączania go do DOM. Czy to problem w starszych przeglądarkach?

— Seanonymous

3

Czy możesz używać frameworka? jQuery i Prototype sprawiają, że tego rodzaju rzeczy są całkiem proste. Oto przykład w Prototype:

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

— swilliams
źródło

3

możesz po prostu zrobić:

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

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

Prosty :)

— Nitin Bansal
źródło

2

Wystarczy dodać pełny przykład JS w HTML

<!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
źródło

0

Jak wskazywali inni, jeśli możesz używać frameworka takiego jak jQuery, najlepiej będzie go użyć, ponieważ prawdopodobnie zrobi to w najlepszy możliwy sposób. Jeśli nie możesz używać frameworka, to chyba najlepszym sposobem na zrobienie tego jest manipulowanie DOMem (i moim zdaniem właściwy sposób).

— Leandro López
źródło

0

Jest to metoda, którą stosuję, aby utworzyć pętlę tagów img lub pojedynczy tag zgodnie z twoim życzeniem

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

lub

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
źródło