Mã JavaScript tốt nhất để tạo phần tử img là gì

107

Tôi muốn tạo một đoạn mã JS đơn giản tạo một phần tử hình ảnh trong nền và không hiển thị bất kỳ thứ gì. Phần tử hình ảnh sẽ gọi một URL theo dõi (chẳng hạn như Omniture) và cần phải đơn giản, mạnh mẽ và chỉ hoạt động trong IE 6 = <. Đây là mã tôi có:

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

Đây có phải là cách đơn giản nhất nhưng mạnh mẽ nhất (không có lỗi) để làm điều đó không?

Tôi không thể sử dụng một khuôn khổ như jQuery. Nó cần phải ở dạng JavaScript đơn giản.

javascript dhtml

— Pete
nguồn

2

Xác định "tốt nhất". Nhanh nhất? Đơn giản nhất?

— Andrew Hedges

1

@steveniseki anh ấy đã sử dụng en.wikipedia.org/wiki/Hungarian_notation

— Iiridayn

82

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

pxchỉ dành cho CSS. Sử dụng:

oImg.width = '1';

để đặt chiều rộng thông qua HTML hoặc:

oImg.style.width = '1px';

để đặt nó thông qua CSS.

Lưu ý rằng các phiên bản IE cũ không tạo ra một hình ảnh phù hợp document.createElement()và các phiên bản KHTML cũ không tạo một Nút DOM thích hợp với new Image(), vì vậy nếu bạn muốn tương thích ngược hoàn toàn, hãy sử dụng một số thứ như:

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

Cũng nên cảnh giác một chút document.body.appendChildnếu tập lệnh có thể thực thi khi trang đang tải. Bạn có thể kết thúc với hình ảnh ở một nơi không mong muốn hoặc một lỗi JavaScript kỳ lạ trên IE. Nếu bạn cần có thể thêm nó vào lúc tải (nhưng sau khi <body>phần tử đã bắt đầu), bạn có thể thử chèn nó vào đầu phần thân bằng cách sử dụng body.insertBefore(body.firstChild).

Để thực hiện điều này một cách vô hình nhưng vẫn có hình ảnh thực sự tải trong tất cả các trình duyệt, bạn có thể chèn một vị trí hoàn toàn ngoài trang <div>làm phần tử đầu tiên của cơ thể và đặt bất kỳ hình ảnh theo dõi / tải trước nào mà bạn không muốn hiển thị ở đó .

— bobince
nguồn

4

Không phải chỉ new Image()hoạt động tốt nhất trong mọi hoàn cảnh?

— Alexis Wilke,

52

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

— Tad
nguồn

19

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

— Michael L Perry
nguồn

@AndreiCristianProdan Sử dụng console.loggiữa từng cặp dòng, vì vậy bạn sẽ biết chính xác dòng nào đang đóng băng nó.

— Rodrigo

12

jQuery:

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

Tôi thấy rằng điều này thậm chí còn hoạt động tốt hơn vì bạn không phải lo lắng về việc HTML thoát bất kỳ thứ gì (điều này nên được thực hiện trong đoạn mã trên, nếu các giá trị không được mã hóa cứng). Nó cũng dễ đọc hơn (từ góc độ JS):

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

— Darryl Hein
nguồn

24

Anh ấy đặc biệt yêu cầu không có jQuery.

— Alex

2

Ngoài ra, phân tích cú pháp văn bản thành mã là vô nghĩa, không hiệu quả và đơn giản là lười biếng. Ai đọc cái này thì tránh làm như vậy. Ý tôi là, nếu bạn đang chèn nghĩa đen <img ... />vào DOM, thì hãy làm điều đó với innerHTML . Tôi không hiểu điều này: /

— aexl

7

Chỉ vì mục đích đầy đủ, tôi cũng khuyên bạn nên sử dụng cách InnerHTML - mặc dù tôi không gọi nó là cách tốt nhất ...

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

Nhân tiện, innerHTML không tệ như vậy

— Binny VA
nguồn

2

Tôi đang sử dụng phương pháp này cho lưới hình ảnh 50x50. Khi tôi thử phương pháp bổ sung ở trên, thời gian thực hiện của tôi đã tăng từ 150 mili giây lên 2250 mili giây. Vì vậy, tôi nghĩ rằng innerHTML hiệu quả hơn nhiều.

— Nicholas

4

Cách ngắn nhất:

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

— aemkei
nguồn

2

Nếu không được thêm vào tài liệu, không chắc chắn rằng src hình ảnh sẽ được tìm nạp (phụ thuộc vào trình duyệt).

— bobince 23/10/08

1

có ai gặp trường hợp trình duyệt không tìm nạp hình ảnh đó nếu không được đính kèm với DOM không?

— antoine129

2

Tôi đã thử nghiệm điều này trong IE, FF, Chrome và Safari — tất cả đều tải hình ảnh mà không cần gắn nó vào DOM. Đây có phải là vấn đề với các trình duyệt cũ hơn không?

— Seanonymous

3

Bạn có được phép sử dụng một khuôn khổ? jQuery và Prototype làm cho việc này trở nên khá dễ dàng. Đây là một mẫu trong Prototype:

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

— swilliams
nguồn

3

bạn chỉ có thể làm:

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

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

Đơn giản :)

— Nitin Bansal
nguồn

2

Chỉ để thêm ví dụ html JS đầy đủ

<!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
nguồn

0

Như những người khác đã chỉ ra nếu bạn được phép sử dụng một khuôn khổ như jQuery, điều tốt nhất nên làm là sử dụng nó, vì rất có thể nó sẽ làm điều đó theo cách tốt nhất có thể. Nếu bạn không được phép sử dụng một khuôn khổ thì tôi nghĩ thao tác với DOM là cách tốt nhất để làm điều đó (và theo ý kiến của tôi, đó là cách đúng đắn để làm điều đó).

— Leandro López
nguồn

0

Đây là phương pháp tôi làm theo để tạo một vòng lặp các thẻ img hoặc một thẻ duy nhất theo ý muốn của bạn

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

hoặc là

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>

— Gv Akhil
nguồn