1

So my problem is this (different from discussed here: In mobile advertising, I will get impression trackers, which could be 2, 3 or 4. Since the network bandwidth is limited, I would want to fire all the available trackers simultaneously, and not in a waterfall manner (please don't ask me why).

There is this code which we have been using:

<script type="text/javascript"> 
var imp_1 = document.createElement("img"); 
imp_1.src = "tracker url 1 here"; 
var imp_2 = document.createElement("img"); 
imp_2.src = "tracker url 2 here"; 
var imp_3 = document.createElement("img"); 
imp_3.src = "tracker url 3 here"; 
var imp_4 = document.createElement("img"); 
imp_4.src = "tracker url 4 here"; 
</script>

UPDATE All of these 1x1 impression trackers will be pointing to different servers, as they would be from different attribution partners.

My questions are:

  1. Is it always required to add the above create call for adding img variables to the DOM? Is it a good practice do so in all scenarios?

  2. Would document.body.appendChild() always do the trick?

  3. If I instead used new Image() in place of the document.createElement() would that work differently here? I was working on putting a setTimeout() against each of the trackers, to fire them simultaneously, but would new Image() would be able to do that by itself?

Teocci
  • 7,189
  • 1
  • 50
  • 48
rishabh
  • 1,155
  • 1
  • 10
  • 17
  • Ask **one** question/question. The above contains at *least* two if not three. – T.J. Crowder Aug 03 '15 at 06:54
  • 1
    *"I would want to fire all the available trackers simultanenously, and not in a waterfall manner"* You can make them *overlap* (provided the browser allows it, mobiles tend to keep the number of simultaneous connections to a lower limit than desktop), but you can't make them *simultaneous*. – T.J. Crowder Aug 03 '15 at 06:55
  • Re `new Image`: According to MDN, they're [the same thing](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image). MDN's usually (but not universally) pretty reliable. I've never heard anything to suggest a difference between them. – T.J. Crowder Aug 03 '15 at 06:56
  • Once upon a time, `new Image()` was preferred for compatibility, but that ended probably with IE5 or earlier. Now *createElement* is probably preferred for consistency with other element constructors. However, using the Image constructor does allow setting the height and width in the call, though probably that should be done in CSS anyway. – RobG Aug 03 '15 at 07:00
  • Got it.. But my main browsers are Chrome(Android) & Safari(iOS). – rishabh Aug 03 '15 at 07:16

1 Answers1

2

Is it always required to add the above creative img vars to the DOM? Is it a good practice do so in all scenarios?

You do not have to add an image to the DOM. But, if you want it to be visible in the page, then it will have to be in the DOM somehow as adding it to the DOM is how it gets displayed. One common situation where an image might not be added to the DOM is when precaching an image (causing the browser to download the image so that it will already be in the cache when it is later needed).

Would document.body.appendChild() always do the trick?

document.body.appendChild(img) will add the image to the end of the <body> section of the DOM. It will always do that. But, often that is not exactly where you want the image in the DOM so some other code that locates the position elsewhere may be required.

If I instead used new Image() in place of the document.createElement() would that work differently here? I was working on putting a setTimeout() against each of the trackers, to fire them simultaneously, but would new Image() would be able to do that by itself?

You can use either new Image() or document.createElement("img"). Either will create an image object just the same. It is unclear to me what your reference to setTimeout() is about. The image tag doesn't have any built in timing capability. If you wanted to load an image some specific time in the future, you would likely want to use a setTimeout() call to schedule that event for a specific time in the future.

You do not control whether a browser requests N images simultaneously or whether it gets some of them now and some of them after the first few have finished. Browsers generally have a connection limit per origin and they will only fire so many connections at once to the same origin. When subsequent requests come in after the limit has been reached they are queued until some of the currently open requests finish.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Essentially using setTimeout() I wanted to achieve this.. ` setTimeout(function(){ fire tracker 1 here }, 0); setTimeout(function(){ fire tracker 2 here }, 0); setTimeout(function(){ fire tracker 3 here }, 0); setTimeout(function(){ fire tracker 4 here }, 0); So that essentially they should be fired(atleast tried to be fired) simultaneously? – rishabh Aug 03 '15 at 07:12
  • @rishabh - there's no point in using multiple `setTimeout(fn, 0)` statements. That won't do anything different than creating all the trackers in the same `setTimeout()`. Browser Javascript is single threaded so the trackers will be created sequentially no matter how you do it. There is no "pure simultaneous" in Javascript. Besides, the server will never process the requests all at the same time anyway. – jfriend00 Aug 03 '15 at 07:15
  • Got it. Essentially these are all different company URLs(different mobile attribution company URLs) so server endpoints are all different. – rishabh Aug 03 '15 at 07:17
  • @rishabh - then the relative timing of the different URLs should not matter at all. No reason to even use any `setTimeout()` if you just want them to start now. – jfriend00 Aug 03 '15 at 07:46