Bir img öğesi oluşturmak için en iyi JavaScript kodu nedir

107

Arka planda bir resim öğesi oluşturan ve hiçbir şey göstermeyen basit bir JS kodu oluşturmak istiyorum. Resim öğesi bir izleme URL'si (Omniture gibi) çağırır ve basit ve sağlam olması ve yalnızca IE 6 = <ile çalışması gerekir. İşte sahip olduğum kod:

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

Bunu yapmanın en basit ama en sağlam (hatasız) yolu bu mu?

JQuery gibi bir çerçeve kullanamıyorum. Düz JavaScript olması gerekir.

javascript dhtml

— Pete
kaynak

2

"En iyi" yi tanımlayın. En hızlı mı? En basit mi?

— Andrew Hedges

1

@steveniseki kullandı en.wikipedia.org/wiki/Hungarian_notation

— Iiridayn

82

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

pxyalnızca CSS içindir. Either "kalıbını kullanınız:

oImg.width = '1';

HTML yoluyla bir genişlik ayarlamak için veya:

oImg.style.width = '1px';

CSS aracılığıyla ayarlamak için.

Eski IE sürümlerinin düzgün bir görüntü oluşturmadığını document.createElement()ve KHTML'nin eski sürümlerinin uygun bir DOM Düğümü oluşturmadığını unutmayın new Image(); bu nedenle, tamamen geriye dönük uyumlu olmak istiyorsanız aşağıdaki gibi bir şey kullanın:

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

Ayrıca document.body.appendChild, sayfa yükleme işleminin ortasındayken komut dosyasının çalışıp çalışmayacağına da biraz dikkat edin. Görüntüyü beklenmedik bir yerde veya IE'de garip bir JavaScript hatasıyla sonuçlandırabilirsiniz. Yükleme zamanında eklemeniz gerekiyorsa (ancak <body>öğe başladıktan sonra ), bunu kullanarak gövdenin başlangıcına eklemeyi deneyebilirsiniz.body.insertBefore(body.firstChild) .

Bunu görünmez bir şekilde yapmak, ancak yine de görüntünün tüm tarayıcılarda gerçekten yüklenmesini sağlamak için <div>, vücudun ilk çocuğu olarak kesinlikle sayfa dışına yerleştirilmiş bir sayfa ekleyebilir ve orada görünmesini istemediğiniz herhangi bir izleme / önyükleme görüntüsünü yerleştirebilirsiniz. .

— Bobince
kaynak

4

new Image()Her koşulda en iyi sonucu vermez miydi ?

— Alexis Wilke

52

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

— Tad
kaynak

19

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

— Michael L Perry
kaynak

@AndreiCristianProdan console.logHer bir çizgi çifti arasında kullanın , böylece hangi satırın onu dondurduğunu tam olarak bilirsiniz.

— Rodrigo

12

jQuery:

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

Bunun daha da iyi çalıştığını buldum çünkü HTML'den kaçan herhangi bir şey hakkında endişelenmenize gerek yok (değerler sabit kodlanmadıysa yukarıdaki kodda yapılmalıdır). Ayrıca okumak daha kolaydır (JS açısından):

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

— Darryl Hein
kaynak

24

Özellikle jQuery istemedi.

— Alex

2

Ayrıca, metni koda ayrıştırmak anlamsız, etkisiz ve tembeldir. Bunu kim okursa, böyle yapmaktan kaçının. Demek istediğim, <img ... />DOM'a değişmez bilgi ekliyorsanız , bunu innerHTML ile yapın . Bunu anlamıyorum: /

— aexl

7

Sırf eksiksizlik adına, InnerHTML yolunu da kullanmanızı öneririm - buna en iyi yol demesem de ...

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

Bu arada, innerHTML o kadar da kötü değil

— Binny VA
kaynak

2

Bu yöntemi 50x50 görüntü ızgarası için kullanıyordum. Yukarıdaki ekleme yöntemini denediğimde yürütme sürem 150ms'den 2250ms'ye sıçradı. Bu yüzden innerHTML'nin çok daha verimli olduğunu düşünüyorum.

— Nicholas

4

En kısa yol:

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

— Aemkei
kaynak

2

Belgeye eklenmezse, resim src'nin hiç alınmayacağı kesin değildir (tarayıcıya bağlı).

— bobince

1

DOM'a eklenmemişse bu görüntüyü getirmeyen tarayıcı vakası olan var mı?

— antoine129

2

Bunu IE, FF, Chrome ve Safari'de test ediyorum - tümü görüntüyü DOM'a eklenmeden yükleyin. Bu eski tarayıcılarla ilgili bir sorun mu?

— Seanonymous

3

Çerçeve kullanma izniniz var mı? jQuery ve Prototype , bu tür şeyleri oldukça kolaylaştırır. Prototipte bir örnek:

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

— Swilliams
kaynak

3

basitçe yapabilirsiniz:

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

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

Basit :)

— Nitin Bansal
kaynak

2

Tam html JS örneği eklemek için

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

— Vaib'ler
kaynak

0

Başkalarının da belirttiği gibi, jQuery gibi bir çerçeve kullanmanıza izin verilirse, yapılacak en iyi şey onu kullanmaktır, çünkü büyük olasılıkla bunu mümkün olan en iyi şekilde yapacaktır. Bir çerçeve kullanma izniniz yoksa, o zaman DOM'u manipüle etmenin bunu yapmanın en iyi yolu olduğunu tahmin ediyorum (ve bence bunu yapmanın doğru yolu).

— Leandro López
kaynak

0

İsteğinize göre bir img etiketi döngüsü veya tek bir etiket oluşturmak için izlediğim yöntem budur

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

veya

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
kaynak