I was tasked with adding various Tracking Pixels to the DOM from an Unobtrusive JavaScript Library hosted in the Azure Cloud.
It finally dawned on me that I did not have to go through the machinations of creating the pixel and appending it to the appropriate element in the DOM.
All I really needed to accomplish was to have the pixel fire (meaning: send an HTTP Request to a remote Server), complete with its Query String values, which each Server on the other side needs in order to process Server-Side-Code before returning the pixel.
It never matters whether the pixel actually appears on the page or not. Delivering the payload is the only goal.
So what is the [workaround]?
I rethought the creation of pixels and opted for a very quick method of creating many pixels at the same time:
intermark.createImages = function () {
for (var i = 0; i < arguments.length; i++) {
var img = new Image();
img.src = arguments[i].toString();
}
};
And then I can call the function using the following for any number of pixels necessary:
if (id > -1) {
intermark.createImages(pixel1Src, pixel2Src);
}
And Voila! Problem solved!