Apa kode JavaScript terbaik untuk membuat elemen img

107

Saya ingin membuat sedikit kode JS yang membuat elemen gambar di latar belakang dan tidak menampilkan apa pun. Elemen gambar akan memanggil URL pelacakan (seperti Omniture) dan harus sederhana dan kuat serta hanya berfungsi di IE 6 = <. Ini kode yang saya miliki:

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

Apakah ini cara yang paling sederhana tetapi paling kuat (bebas kesalahan) untuk melakukannya?

Saya tidak dapat menggunakan kerangka kerja seperti jQuery. Ini harus dalam JavaScript biasa.

javascript dhtml

— Pete
sumber

2

Tentukan "terbaik". Tercepat? Paling sederhana?

— Andrew Hedges

1

@steveniseki dia menggunakan en.wikipedia.org/wiki/Hungarian_notation

— Iiridayn

82

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

pxhanya untuk CSS. Gunakan salah satu:

oImg.width = '1';

untuk mengatur lebar melalui HTML, atau:

oImg.style.width = '1px';

untuk mengaturnya melalui CSS.

Perhatikan bahwa versi lama IE tidak membuat gambar yang tepat dengan document.createElement(), dan versi lama KHTML tidak membuat Node DOM yang tepat new Image(), jadi jika Anda ingin sepenuhnya kompatibel dengan mundur, gunakan sesuatu seperti:

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

Berhati-hatilah juga document.body.appendChildjika skrip mungkin dijalankan saat halaman sedang dimuat. Anda bisa mendapatkan gambar di tempat yang tidak terduga, atau kesalahan JavaScript yang aneh di IE. Jika Anda harus dapat menambahkannya pada saat pemuatan (tetapi setelah <body>elemen dimulai), Anda dapat mencoba memasukkannya di awal badan menggunakan body.insertBefore(body.firstChild).

Untuk melakukan ini tanpa terlihat tetapi masih memiliki gambar yang benar-benar dimuat di semua browser, Anda dapat memasukkan benar-benar-off-halaman-halaman <div>sebagai anak pertama tubuh dan meletakkan gambar pelacakan / pramuat yang Anda tidak ingin terlihat di sana .

— bobince
sumber

4

Tidakkah hanya new Image()bekerja paling baik dalam segala keadaan?

— Alexis Wilke

52

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

— Tad
sumber

19

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

— Michael L Perry
sumber

@AndreiCristianProdan Gunakan di console.logantara setiap pasang garis, jadi Anda akan tahu persis garis mana yang membekukannya.

— Rodrigo

12

jQuery:

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

Saya telah menemukan bahwa ini bekerja lebih baik karena Anda tidak perlu khawatir tentang HTML yang lolos dari apa pun (yang harus dilakukan dalam kode di atas, jika nilainya tidak dikodekan dengan keras). Ini juga lebih mudah dibaca (dari perspektif JS):

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

— Darryl Hein
sumber

24

Dia secara khusus tidak meminta jQuery.

— Alex

2

Juga, mengurai teks menjadi kode tidak ada gunanya, tidak efektif, dan malas. Siapapun yang membaca ini, hindari melakukannya seperti itu. Maksud saya, jika Anda memasukkan literal <img ... />ke DOM, lakukan dengan innerHTML . Saya tidak mengerti ini: /

— aexl

7

Hanya demi kelengkapan, saya menyarankan untuk menggunakan cara InnerHTML juga - meskipun saya tidak akan menyebutnya sebagai cara terbaik ...

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

Omong-omong, innerHTML tidak seburuk itu

— Binny VA
sumber

2

Saya menggunakan metode ini untuk kisi gambar berukuran 50x50. Ketika saya mencoba metode penambahan di atas, waktu eksekusi saya melonjak dari 150ms menjadi 2250ms. Jadi menurut saya innerHTML jauh lebih efisien.

— Nicholas

4

Cara terpendek:

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

— aemkei
sumber

2

Jika tidak ditambahkan ke dokumen, belum tentu gambar src akan diambil sama sekali (tergantung browser).

— bobince

1

adakah yang punya kasus browser tidak mengambil gambar itu jika tidak dilampirkan ke DOM?

— antoine129

2

Saya telah mengujinya di IE, FF, Chrome, dan Safari — semua memuat gambar tanpa ditambahkan ke DOM. Apakah ini masalah dengan browser lama?

— Seanonymous

3

Apakah Anda diizinkan menggunakan kerangka kerja? jQuery dan Prototype membuat hal semacam ini menjadi sangat mudah. Berikut contoh dalam Prototipe:

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

— swilliams
sumber

3

Anda cukup melakukan:

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

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

Sederhana :)

— Nitin Bansal
sumber

2

Hanya untuk menambahkan contoh JS html lengkap

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

0

Seperti yang ditunjukkan orang lain jika Anda diizinkan menggunakan kerangka kerja seperti jQuery, hal terbaik untuk dilakukan adalah menggunakannya, karena kemungkinan besar akan melakukannya dengan cara terbaik. Jika Anda tidak diperbolehkan menggunakan kerangka kerja maka saya kira memanipulasi DOM adalah cara terbaik untuk melakukannya (dan menurut saya, cara yang tepat untuk melakukannya).

— Leandro López
sumber

0

Ini adalah metode yang saya ikuti untuk membuat loop tag img atau satu tag sesuai keinginan Anda

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

atau

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
sumber