Save data in image

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 开发者_JS百科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!

---

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

---

No, it doesn't make sense. Your idea, that is.

1. You wanted to save the data into a gif. Okay I suppose that's possible, through server scripting.
2. You want to download as part of the page. Okay, if it's a document asset/resource (you put it as <img>, or you download it via javascript using new Image, possible.
3. onload, function will be triggered. gif will be converted to JSON. I don't know what you mean by this, maybe you want to convert to Data URL through Base64 encoding.
4. ??
5. Profit!

I can't see clearly what you want to achieve at step 4, before you proceed to reap the profit.

• Is the gif converted to JSON server-side or client-side?

Anyway, if you are just looking to download that JSON via XHR without blocking the page load (maybe you meant including the assets), but right after DOM is in memory, you can use DOMContentLoaded event listener for window. And since XHR is by default asynchronous (unless you made it otherwise), other javascript actions should proceed as usual.

By the way, if you have clarifications, please add it to your question. For the part regarding how to download JSON without blocking, you can comment this answer.