โค้ด JavaScript ที่ดีที่สุดในการสร้างองค์ประกอบ img คืออะไร

107

ฉันต้องการสร้างโค้ด JS ง่ายๆที่สร้างองค์ประกอบภาพในพื้นหลังและไม่แสดงอะไรเลย องค์ประกอบรูปภาพจะเรียก URL ติดตามผล (เช่น Omniture) และต้องเรียบง่ายและมีประสิทธิภาพและทำงานได้ใน IE 6 = <เท่านั้น นี่คือรหัสที่ฉันมี:

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

นี่เป็นวิธีที่ง่ายที่สุด แต่มีประสิทธิภาพมากที่สุด (ปราศจากข้อผิดพลาด) หรือไม่?

ฉันไม่สามารถใช้กรอบงานเช่น jQuery ต้องอยู่ใน JavaScript ธรรมดา

javascript dhtml

— พีท
แหล่งที่มา

2

กำหนด "ดีที่สุด" เร็วที่สุด? ง่ายที่สุด?

— Andrew Hedges

1

@steveniseki เขาใช้en.wikipedia.org/wiki/Hungarian_notation

— Iiridayn

82

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

pxใช้สำหรับ CSS เท่านั้น ใช้อย่างใดอย่างหนึ่ง:

oImg.width = '1';

เพื่อกำหนดความกว้างผ่าน HTML หรือ:

oImg.style.width = '1px';

เพื่อตั้งค่าผ่าน CSS

โปรดทราบว่า IE เวอร์ชันเก่าไม่ได้สร้างอิมเมจที่เหมาะสมdocument.createElement()และ KHTML เวอร์ชันเก่าไม่ได้สร้าง DOM Node ที่เหมาะสมด้วยnew Image()ดังนั้นหากคุณต้องการใช้งานร่วมกันได้อย่างสมบูรณ์ให้ใช้สิ่งต่อไปนี้:

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

นอกจากนี้โปรดระวังเล็กน้อยdocument.body.appendChildว่าสคริปต์อาจทำงานได้หรือไม่เนื่องจากหน้าเว็บอยู่ระหว่างการโหลด คุณสามารถจบลงด้วยภาพในที่ที่ไม่คาดคิดหรือข้อผิดพลาดแปลก ๆ ของ JavaScript บน IE หากคุณต้องการที่จะสามารถที่จะเพิ่มที่โหลดเวลา ( แต่หลังจากที่<body>องค์ประกอบได้เริ่มต้น), body.insertBefore(body.firstChild)คุณอาจจะลองใส่ในช่วงเริ่มต้นของร่างกายโดยใช้

หากต้องการทำสิ่งนี้ให้มองไม่เห็น แต่ยังคงมีภาพโหลดในทุกเบราว์เซอร์คุณสามารถแทรกตำแหน่งที่แน่นอนปิดหน้า<div>เป็นลูกคนแรกของร่างกายและใส่ภาพติดตาม / โหลดล่วงหน้าที่คุณไม่ต้องการให้มองเห็นได้ .

— Bobince
แหล่งที่มา

4

จะไม่ได้new Image()ผลดีที่สุดในทุกสถานการณ์หรือ?

— Alexis Wilke

52

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

— ตด
แหล่งที่มา

19

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

— Michael L Perry
แหล่งที่มา

@AndreiCristianProdan ใช้console.logระหว่างแต่ละคู่ของเส้นดังนั้นคุณจะรู้ว่าเส้นไหนกำลังแช่แข็ง

— Rodrigo

12

jQuery:

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

ฉันพบว่าสิ่งนี้ทำงานได้ดียิ่งขึ้นเพราะคุณไม่ต้องกังวลว่า HTML จะหลบหนีอะไร (ซึ่งควรทำในโค้ดด้านบนหากค่าไม่ได้รับการเข้ารหัส) นอกจากนี้ยังอ่านง่ายกว่า (จากมุมมอง JS):

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

— ดาร์ริลไฮน์
แหล่งที่มา

24

เขาร้องขอโดยเฉพาะว่าไม่มี jQuery

— อเล็กซ์

2

นอกจากนี้การแยกวิเคราะห์ข้อความเป็นรหัสนั้นไม่มีจุดหมายไม่มีประสิทธิภาพและเป็นเรื่องธรรมดา ใครอ่านข้อความนี้ให้หลีกเลี่ยงการทำเช่นนั้น ฉันหมายความว่าถ้าคุณกำลังแทรกตัวอักษร<img ... />ลงใน DOM ให้ทำด้วยinnerHTMLแล้ว ฉันไม่ได้รับสิ่งนี้: /

— aexl

7

เพื่อความสมบูรณ์ฉันขอแนะนำให้ใช้วิธี InnerHTML เช่นกันแม้ว่าฉันจะไม่เรียกว่าวิธีที่ดีที่สุด ...

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

อย่างไรก็ตามinnerHTML ไม่ได้แย่ขนาดนั้น

— Binny VA
แหล่งที่มา

2

ฉันใช้วิธีนี้สำหรับภาพขนาด 50x50 ตาราง เมื่อฉันลองวิธีการต่อท้ายข้างต้นเวลาในการดำเนินการของฉันเพิ่มขึ้นจาก 150ms เป็น 2250ms ดังนั้นฉันคิดว่า innerHTML มีประสิทธิภาพมากกว่ามาก

— Nicholas

4

วิธีที่สั้นที่สุด:

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

— เอมเค
แหล่งที่มา

2

หากไม่ได้เพิ่มลงในเอกสารก็ไม่แน่ใจว่าจะดึงรูปภาพ src ได้เลย (ขึ้นอยู่กับเบราว์เซอร์)

— bobince

1

มีใครบ้างที่เบราว์เซอร์ไม่ดึงภาพนั้นหากไม่ได้แนบมากับ DOM?

— antoine129

2

ฉันได้ทดสอบสิ่งนี้ใน IE, FF, Chrome และ Safari - ทั้งหมดโหลดรูปภาพโดยไม่ต้องต่อท้าย DOM ปัญหานี้เกิดกับเบราว์เซอร์รุ่นเก่าหรือไม่

— Seanonymous

3

คุณได้รับอนุญาตให้ใช้กรอบงานหรือไม่? jQueryและPrototypeทำให้สิ่งนี้ค่อนข้างง่าย นี่คือตัวอย่างใน Prototype:

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

— swilliams
แหล่งที่มา

3

คุณสามารถทำได้:

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

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

เรียบง่าย :)

— นิทินแบนซัล
แหล่งที่มา

2

เพียงแค่เพิ่มตัวอย่าง html JS แบบเต็ม

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

— ไวบ์
แหล่งที่มา

0

ดังที่คนอื่น ๆ ชี้ให้เห็นว่าคุณได้รับอนุญาตให้ใช้เฟรมเวิร์กเช่น jQuery หรือไม่สิ่งที่ดีที่สุดที่ควรทำคือใช้มันเนื่องจากมีแนวโน้มสูงที่จะทำในวิธีที่ดีที่สุด หากคุณไม่ได้รับอนุญาตให้ใช้เฟรมเวิร์กฉันเดาว่าการจัดการ DOM เป็นวิธีที่ดีที่สุดในการทำ (และในความคิดของฉันวิธีที่ถูกต้องในการทำ)

— Leandro López
แหล่งที่มา

0

นี่เป็นวิธีที่ฉันทำตามเพื่อสร้างห่วงของแท็ก img หรือแท็กเดียวตามที่คุณต้องการ

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

หรือ

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
แหล่งที่มา