Jaki jest najlepszy kod JavaScript do utworzenia elementu img?

Chcę utworzyć prosty bit kodu JS, który tworzy element obrazu w tle i nie wyświetla niczego. Element obrazu wywoła link monitorujący (taki jak Omniture) i musi być prosty i niezawodny i działać tylko w IE 6 = <. Oto kod, który mam:Jaki jest najlepszy kod JavaScript do utworzenia elementu 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);

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

Nie mogę użyć frameworka takiego jak jQuery. Musi być w zwykłym kodzie JavaScript.

Źródło

2008-10-22 Pete

Zdefiniuj "najlepszy". Najszybszy? Najprostszy? –

dlaczego nazywasz to oImg? –

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

px jest tylko CSS. Użyj albo:

oImg.width = '1';

ustawić szerokość poprzez HTML, czyli

oImg.style.width = '1px';

ustawić go poprzez CSS.

Należy pamiętać, że stare wersje IE nie tworzą prawidłowego obrazu z document.createElement() i stare wersje KHTML nie tworzą odpowiedniego węzła DOM z new Image(), więc jeśli chcesz być w pełni wstecznie kompatybilne użyć 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; 
}

Należy również zachować ostrożność w stosunku do document.body.appendChild, jeśli skrypt może zostać wykonany, gdy strona znajduje się w trakcie ładowania. Możesz skończyć z obrazem w nieoczekiwanym miejscu lub dziwnym błędem JavaScript na IE. Jeśli musisz mieć możliwość dodania go w czasie ładowania (ale po uruchomieniu elementu <body>), możesz spróbować wstawić go na początku korpusu, używając body.insertBefore(body.firstChild).

Aby zrobić to w sposób niewidoczny, ale nadal można załadować obraz we wszystkich przeglądarkach, można wstawić bezwzględnie umieszczony poza stroną <div> jako pierwsze dziecko ciała i wstawić dowolne obrazy śledzenia/pobierania wstępnego, których nie chcesz być widocznym tam.

Źródło

2008-10-22 18:49:56 bobince

Czy po prostu "nowy obraz()" nie działa najlepiej w każdych okolicznościach? –

Czy można używać frameworka? jQuery i Prototype sprawiają, że tego typu rzeczy są całkiem proste. Oto próbka w Prototype:

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

Źródło

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

Źródło

2008-10-22 17:58:11 Tad

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

Źródło

2008-10-22 18:08:15

Przepraszamy, "appendChild". Naucz mnie nie sprawdzać dwukrotnie mojego kodu. Odpowiedź została zmieniona. –

ten kod, z jakiegoś powodu zawiesza moją przeglądarkę –

jQuery:

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

Odkryłam, że to działa nawet lepiej, bo nie trzeba się martwić o cokolwiek ucieczki HTML (co należy zrobić w powyższym kodzie, jeśli wartości nie były zakodowane na sztywno). Jest to także łatwiejsze do odczytania (z perspektywy JS):

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

Źródło

2008-10-22 18:12:30

+21

Specjalnie poprosił o brak jQuery. – Alex

Również parsowanie tekstu na kod jest bezużyteczne, nieskuteczne i leniwe. Ktokolwiek to czyta, unikaj robienia tego w ten sposób. Mam na myśli, jeśli wstawiasz dosłowne '' do DOM, zrób to za pomocą [innerHTML] (https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML). Po prostu nie rozumiem tego:/ –

Najkrótsza droga:

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

Źródło

2008-10-23 11:04:49 aemkei

Jeśli nie zostanie dodany do dokumentu, nie ma pewności, że obraz src zostanie pobrany w ogóle (zależny od przeglądarki). – bobince

czy ktoś ma przypadki przeglądarek nie pobierających tego obrazu, jeśli nie jest dołączony do DOM? – antoine129

Testowałem to w IE, FF, Chrome i Safari - wszystko ładuje obraz bez dołączania do DOM. Czy to jest problem ze starszymi przeglądarkami? – Seanonymous

Jak inni wskazał, jeśli wolno użyć ramy takie jak jQuery najlepszą rzeczą do zrobienia jest go używać, ponieważ wysokie prawdopodobieństwo, zrobi to w najlepszy możliwy sposób. Jeśli nie masz uprawnień do korzystania z frameworka, domyślam się, że manipulowanie DOMem jest najlepszym sposobem na zrobienie tego (i moim zdaniem, właściwą drogą).

Źródło

2008-10-23 11:14:26

Tylko dla kompletności wywodu, chciałbym zaproponować stosując drogę InnerHTML, a także - choć nie nazwałbym go najlepszym sposobem ...

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

Nawiasem mówiąc, innerHTML is not that bad

Źródło

2008-10-23 15:08:37

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

można po prostu zrobić:

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

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

Proste :)

Źródło

2011-10-15 08:16:58

Wystarczy t o dodaj pełny kod JS przykład JT

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

Źródło

2016-10-22 12:17:37 Vaibs

Jaki jest najlepszy kod JavaScript do utworzenia elementu img?

Odpowiedz

Powiązane problemy