Downloading a Javascript Library as an image?

Question

I've seen a couple of pages load their javascript files into a page via new Image.src ='';

    <script type="text/javascript">
        new Image().src = "XXXX\/js\/jquery-1.7.2.min.js";
    </script>

I was just wondering the benefits or purpose of this.

@DavorMlinaric But they're obviously not loading an image here. They're loading jQuery. Click-tracking? Maybe. — Michael Todd, Apr 29 '13 at 18:31
Can you give a link to a real-world example? I'd guess the intent is to preload the library, so a future fetch will load from the cache (no idea why you'd ever need to do that, though). — apsillers, Apr 29 '13 at 18:32
Perhaps they assumed that they could "cheat" and get another stream by loading a script as an image. Won't work, as far as I know. Servers and browsers don't differentiate between content, to my knowledge, so a download is a download. — Michael Todd, Apr 29 '13 at 18:33
@MichaelTodd i know it's not image :) but it didn't had sense to me to load jquery to image so i said its for preloading (images) or click tracking... and that's what is mostly used for. — Davor Mlinaric, Apr 29 '13 at 18:40
@DavorMlinaric could you plz explain what u mean by click tracking? — Songo, Apr 29 '13 at 19:20
@Songo you have function that receives a link, but instead of instant redirecting you are calling some your function `img.src ='...click.aspx'` to count that click, and then after few miliseconds you redirect to link. — Davor Mlinaric, Apr 30 '13 at 06:35

score 7 · Accepted Answer · edited May 23 '17 at 12:04

It's a quick and dirty way of initiating an HTTP request (as the comments on the question suggest).

There may be a minor advantage gained by initiating the download at the top of the page and then including <script src='the-same-file.js'></script> at the bottom of the page so that the file can be loaded from the browser cache.

This might allow the latency of the download to be parallelized with a parsing task. For example, the download initiated in the head might run while the body is still being parsed.

Why not just reference the file in the head using the src attribute?

If neither [the defer or async] attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.

Source (suggested reading)

In other words, this method attempts to allow the browser to download the file without incurring the blocking behavior until later in the process.

However

If this is really necessary, I would consider the defer attribute which is intended for such purposes rather than the new Image() hack.
This "optimization" could backfire depending on cache headers. You could end up making two HTTP requests or even downloading the file twice.

"In the Wild"

A quick investigation of several major sites (Google search, Gmail, Twitter, Facebook, Netflix) shows that this technique is not used to fetch JavaScript files and used very sparingly overall.

For example, Facebook appears to use it not for caching/performance but for tracking purposes when the site is (potentially maliciously) loaded into a frameset. By creating an Image instance and setting the source, they initiate an HTTP request to a page which tracks the clickjacking attempt.

This is an isolated case; under normal circumstances this script will never be run.

Downloading a Javascript Library as an image?

1 Answers1