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


107

我想创建一个简单的JS代码,在后台创建一个图像元素,并且不显示任何内容。image元素将调用跟踪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。


2
定义“最佳”。最快的?最简单?
Andrew Hedges

1
@steveniseki,他使用了en.wikipedia.org/wiki/Hungarian_notation
Iiridayn

Answers:


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

px仅用于CSS。使用以下任一方法:

oImg.width = '1';

通过HTML设置宽度,或者:

oImg.style.width = '1px';

通过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;
}

也要特别注意document.body.appendChild脚本是否可以在页面处于加载过程中执行。您可能会在意想不到的地方出现图像,或者在IE上出现怪异的JavaScript错误。如果您需要能够在加载时(但在<body>元素启动之后)添加它,则可以尝试使用在主体的开头插入它body.insertBefore(body.firstChild)

要隐式地执行此操作,但仍要在所有浏览器中实际加载图像,您可以插入绝对定位的页面<div>作为正文的第一个孩子,然后将您不希望看到的任何跟踪/预加载图像放置在该页面中。


4
难道不是new Image()在所有情况下都效果最佳吗?
亚历克西斯·威尔克,2016年

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

@AndreiCristianProdan console.log在每对线之间使用,因此您将确切地知道哪条线冻结了它。
罗德里戈

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。
2014年

2
同样,将文本解析为代码是毫无意义,无效且懒惰的。不管谁读这本书,都不要那样做。我的意思是,如果您要向<img ... />DOM中插入文字,请使用innerHTML进行。我只是不明白:/
aexl

7

为了完整起见,我建议您也使用InnerHTML方式-即使我不称其为最佳方式...

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

顺便说一下,innerHTML还不错


2
我正在将这种方法用于50x50的图像网格。当我尝试上述追加方法时,我的执行时间从150ms跃升至2250ms。因此,我认为innerHTML效率更高。
尼古拉斯

4

最短的方法:

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

2
如果未将其添加到文档中,则不确定是否将完全获取图像src(取决于浏览器)。
bobince

1
没有人在没有附加到DOM的情况下会出现浏览器无法获取该图像的情况?
antoine129

2
我已经在IE,FF,Chrome和Safari中对此进行了测试,所有加载图像均不会将其附加到DOM中。这是旧版浏览器的问题吗?
Seanonymous 2015年

3

您可以使用框架吗?jQueryPrototype使这种事情变得非常容易。这是原型中的一个示例:

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

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是实现它的最佳方法(我认为,正确的方法是做到这一点)。


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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.