Best IT Recipes

What is the best JavaScript code to create an img element

I want to create a simple bit of JS code that creates an image element in the background and doesn't display anything. An image element will trigger a tracking URL (e.g. Omniture) and should be simple and reliable and work in IE 6 = <only. Here is the code I have:

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

Is this the easiest, but most reliable (error free) way to do this?

I can not use a framework like jQuery. It should be in plain JavaScript.

+82
javascript dhtml
Oct 22 '08 at 17:52
source share
10 answers
 oImg.setAttribute('width', '1px');

px is for CSS only. Use either:

 oImg.width = '1';

to set the width via HTML, or:

 oImg.style.width = '1px';

to set it through CSS.

Note that older versions of IE do not create the correct image using document.createElement() , and older versions of KHTML do not create the proper DOM Node with new Image() , so if you want to be fully compatible with feedback, 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 careful with document.body.appendChild if the script can be executed as the page is in the middle of loading. You may receive an image in an unexpected place or a strange JavaScript error in IE. If you need to add it at boot time (but after running the <body> element), you can try inserting it at the beginning of the body using body.insertBefore(body.firstChild) .

To make this invisible, but still actually load the image in all browsers, you can insert an absolutely-placed-out-of-page <div> as the body of the first child and put any tracking / preload images that you don’t use want to be visible there.

+62
Oct 22 '08 at 18:49
source share
 var img = new Image(1,1); // width, height values are optional params img.src = 'http://www.testtrackinglink.com';
+45
Oct 22 '08 at 17:58
source share

JQuery

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

I found this to work even better, because you don’t have to worry about HTML hiding something (which should be done in the above code if the values ​​were not hardcoded). This is 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" }));
+14
Oct 22 '08 at 18:12
source share
 var img = document.createElement('img'); img.src = 'my_image.jpg'; document.getElementById('container').appendChild(img);
+11
Oct 22 '08 at 18:08
source share

Just for completeness, I would suggest using the InnerHTML method, even if I did not call it the best way ...

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

By the way, innerHTML is not so bad

+7
Oct 23 '08 at 15:08
source share

Can I use the framework? jQuery and Prototype make this kind of thing pretty easy. Here's a sample in Prototype:

 var elem = new Element('img', { 'class': 'foo', src: 'pic.jpg', alt: 'alternate text' }); $(document).insert(elem);
+4
Oct 22 '08 at 17:53
source share

The shortest way:

 (new Image()).src = "http:/track.me/image.gif";
+3
Oct 23 '08 at 11:04
source share

you can just do:

 var newImage = new Image(); newImage.src = "someImg.jpg"; if(document.images) { document.images.yourImageElementName.src = newImage.src; }

Plain:)

+3
Oct. 15 '11 at 8:16
source share

As others have noted, if you are allowed to use a framework like jQuery, it is best to use it, as it is likely to do it in the best way. If you are not allowed to use the framework, I think that manipulating the DOM is the best way to do this (and, in my opinion, the right way to do this).

0
Oct 23 '08 at 11:14
source share

Just add the full Jtml JS example

 <!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
Oct 22 '16 at 12:17
source share


More articles:


All Articles