What is the best JavaScript code to create an img element

前端未结

关注

 11  1916

I want to create a simple bit of JS code that creates an image element in the background and doesn\'t display anything. The image element will call a tracking URL (such as

相关标签:

11条回答

一向

2020-11-28 21:05

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

0 讨论(0)

半阙折子戏

2020-11-28 21:08
jQuery:
```
$('#container').append('<img src="/path/to/image.jpg"
       width="16" height="16" alt="Test Image" title="Test Image" />');
```
I've found that this works even better because you don't have to worry about HTML escaping anything (which should be done in the above code, if the values weren't hard coded). It's also easier to read (from a JS perspective):
```
$('#container').append($('<img>', { 
    src : "/path/to/image.jpg", 
    width : 16, 
    height : 16, 
    alt : "Test Image", 
    title : "Test Image"
}));
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

旧时难觅i

2020-11-28 21:10

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

0 讨论(0)

南笙

2020-11-28 21:11
```
oImg.setAttribute('width', '1px');
```
px is for CSS only. Use either:
```
oImg.width = '1';
```
to set a width through HTML, or:
```
oImg.style.width = '1px';
```
to set it through CSS.

Note that old versions of IE don't create a proper image with document.createElement(), and old versions of KHTML don't create a proper DOM Node with new Image(), so if you want to be fully backwards compatible use something like:
```
// 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;
}
```
Also be slightly wary of document.body.appendChild if the script may execute as the page is in the middle of loading. You can end up with the image in an unexpected place, or a weird JavaScript error on IE. If you need to be able to add it at load-time (but after the <body> element has started), you could try inserting it at the start of the body using body.insertBefore(body.firstChild).

To do this invisibly but still have the image actually load in all browsers, you could insert an absolutely-positioned-off-the-page <div> as the body's first child and put any tracking/preload images you don't want to be visible in there.
0 讨论(0)
发布评论:

提交评论
- 加载中...
自闭症患者

2020-11-28 21:12
Shortest way:
```
(new Image()).src = "http:/track.me/image.gif";
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

囚心锁ツ

2020-11-28 21:14

This is the method I follow to create a loop of img tags or a single tag as ur wish

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>

0 讨论(0)

1 2 下一页