创建 img 元素的最佳 JavaScript 代码是什么答案

【问题标题】：What is the best JavaScript code to create an img element创建 img 元素的最佳 JavaScript 代码是什么
【发布时间】：2023-03-31 08:05:01
【问题描述】：

我想创建一段简单的 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。

【问题讨论】：

定义“最佳”。最快的？最简单？
@steveniseki 他使用了en.wikipedia.org/wiki/Hungarian_notation

标签： javascript dhtml

【解决方案1】：

这是我按照你的意愿创建一个 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>

【讨论】：

【解决方案2】：

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

px 仅适用于 CSS。使用任一：

oImg.width = '1';

通过 HTML 设置宽度，或者：

oImg.style.width = '1px';

通过 CSS 设置。

请注意，旧版本的 IE 不会使用 document.createElement() 创建正确的图像，而旧版本的 KHTML 不会使用 new Image() 创建正确的 DOM 节点，所以如果您想完全向后兼容，请使用一些东西喜欢：

// 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。您最终可能会在意想不到的地方看到图像，或者 IE 上出现奇怪的 JavaScript 错误。如果您需要能够在加载时添加它（但在 <body> 元素开始之后），您可以尝试使用 body.insertBefore(body.firstChild) 在正文的开头插入它。

要在不可见的情况下执行此操作，但仍要在所有浏览器中实际加载图像，您可以插入一个绝对定位的页面外 <div> 作为 body 的第一个子元素，并放置您没有的任何跟踪/预加载图像希望在那里可见。

【讨论】：

new Image() 不是在所有情况下都能发挥最佳作用吗？

【解决方案3】：

只是添加完整的 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>

【讨论】：

【解决方案4】：

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

【讨论】：

他明确要求不要使用 jQuery。
此外，将文本解析为代码是没有意义的、无效的并且是懒惰的。无论谁读到这篇文章，都避免那样做。我的意思是，如果您要将文字 <img ... /> 插入 DOM，那么请使用 innerHTML 进行操作。我只是不明白这个：/

【解决方案5】：

你可以这样做：

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

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

简单:)

【讨论】：

【解决方案6】：

为了完整起见，我建议也使用 InnerHTML 方式 - 尽管我不会称其为最佳方式...

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

顺便说一句，innerHTML is not that bad

【讨论】：

我将这种方法用于 50x50 网格的图像。当我尝试上述附加方法时，我的执行时间从 150 毫秒跳到了 2250 毫秒。所以我认为 innerHTML 效率更高。

【解决方案7】：

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

【讨论】：

@AndreiCristianProdan 在每对线之间使用console.log，这样您就可以准确地知道是哪条线冻结了它。

【解决方案8】：

正如其他人指出的那样，如果您被允许使用像 jQuery 这样的框架，最好的办法就是使用它，因为它很可能会以最好的方式做到这一点。如果您不允许使用框架，那么我认为操作 DOM 是最好的方法（在我看来，这是正确的方法）。

【讨论】：

【解决方案9】：

最短路径：

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

【讨论】：

如果未添加到文档中，则根本无法确定是否会获取图像 src（取决于浏览器）。
如果没有附加到 DOM，是否有人遇到浏览器无法获取该图像的情况？
我已经在 IE、FF、Chrome 和 Safari 中对此进行了测试——所有这些都加载图像而不将其附加到 DOM。这是旧浏览器的问题吗？

【解决方案10】：

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

【讨论】：

【解决方案11】：

你可以使用框架吗？ jQuery 和 Prototype 让这种事情变得非常容易。这是 Prototype 中的一个示例：

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

【讨论】：