Question

Im trying to figure out a way to get some JSON data transfered from my server to the client, and then evaluated clientside using javascript.

Right now i do this with a simple XHR call that retries a JSON string. This works fine, but the problem is that its blocking.

What i want to do is to start downloading my .js file using on-demand javascript loading like:

  var head = document.getElementsByTagName("head")[0];
   script = document.createElement('script');
   script.id = 'myScript';
   script.type = 'text/javascript';
   script.src = "myScript.js";
   head.appendChild(script);

This works fine and is not blocking the rest of the page from loading.

Then in “myScript.js” i have an onload function, that will be triggerd when page is done loading. In this function there are a call to the server that retrieves the JSON string.

Problem is that as it is an onload function, it will not start retrieving this JSON until the page is done loading.

So im looking for a way to start downloading the JSON string before onload event is triggered, but WITHOUT blocking the page from loading.

And my idea was that i wanted to save the data into a gif serverside, and start downloading this as part of the page, and then on onLoad i will trigger my function and convert the gif into JSON using javascript.

Hope it make sense!

Answer 1

You can load a PNG file and read it via javascript and the HTML5 canvas object. The gist is to draw the image onto a canvas element; then read it via Javascript after it’s drawn. Here’s code (https://github.com/ijoey/datainimage) from my research, it serializes a JSON object into a string, stores that data into an array and draws it onto a canvas element. Then, it reads it back.

Here’s a link to my code on Github: https://github.com/ijoey/datainimage/

I started off with the following article about how to do it:
http://blog.nihilogic.dk/2008/05/compression-using-canvas-and-png.html