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

Pet*_*ete 103 javascript dhtml

我想创建一个简单的JS代码,在后台创建一个图像元素,不显示任何内容.image元素将调用跟踪URL(例如Omniture),并且需要简单而强大,并且在IE 6 = <only中工作.这是我的代码:

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);
Run Code Online (Sandbox Code Playgroud)

这是最简单但最健壮(无错误)的方法吗?

我不能使用像jQuery这样的框架.它需要是纯JavaScript.

bob*_*nce 79

oImg.setAttribute('width', '1px');
Run Code Online (Sandbox Code Playgroud)

px仅适用于CSS.使用:

oImg.width = '1';
Run Code Online (Sandbox Code Playgroud)

通过HTML设置宽度,或:

oImg.style.width = '1px';
Run Code Online (Sandbox Code Playgroud)

通过CSS设置它.

请注意,旧版本的IE无法创建正确的图像document.createElement(),旧版本的KHTML不会创建正确的DOM节点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;
}
Run Code Online (Sandbox Code Playgroud)

document.body.appendChild如果脚本可能在页面处于加载过程中时执行,也要稍微警惕.您可以在意外的地方结束图像,或在IE上出现奇怪的JavaScript错误.如果您需要能够在加载时添加它(但在<body>元素启动后),您可以尝试使用在主体的开头插入它body.insertBefore(body.firstChild).

要做到这一点不可见但仍然在所有浏览器中实际加载图像,您可以插入一个绝对定位的页面<div>作为正文的第一个孩子并放置您不希望在那里可见的任何跟踪/预加载图像.

  • 不仅仅是`new Image()`在所有情况下都能发挥最佳作用吗? (4认同)

Tad*_*Tad 49

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


Mic*_*rry 15

var img = document.createElement('img');
img.src = 'my_image.jpg';
document.getElementById('container').appendChild(img);
Run Code Online (Sandbox Code Playgroud)


Dar*_*ein 11

jQuery的:

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

我发现这个工作更好,因为你不必担心HTML转义任何东西(如果值不是硬编码的话,应该在上面的代码中完成).它也更容易阅读(从JS的角度来看):

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

  • 他特别要求没有jQuery. (24认同)
  • 此外,将文本解析为代码是毫无意义的,无效的和简单的懒惰.无论谁读到这个,都要避免这样做.我的意思是,如果您将文字`<img rel="nofollow noreferrer" ... />`插入DOM,请使用[innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/) innerHTML)然后.我只是不明白:/ (2认同)

Bin*_*V A 7

仅仅为了完整起见,我建议使用InnerHTML方式 - 即使我不称之为最好的方式......

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

顺便说一句,innerHTML并不是那么糟糕

  • 我正在使用这种方法获得50x50的图像网格.当我尝试上述附加方法时,我的执行时间从150ms跳到2250ms.所以我认为innerHTML效率更高. (2认同)

aem*_*kei 5

最短路径:

(new Image()).src = "http:/track.me/image.gif";
Run Code Online (Sandbox Code Playgroud)

  • 如果未添加到文档中,则根本不确定是否会获取图像 src(取决于浏览器)。 (2认同)
  • 我已经在 IE、FF、Chrome 和 Safari 中对此进行了测试——所有这些都加载了图像而不将其附加到 DOM。这是旧浏览器的问题吗? (2认同)