Advertisement Jump to content
Sign in to follow this  
Zotoaster

Synchronous loading of images in HTML5

This topic is 1864 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

So I've been working on a programming language similar to Java/C# as a personal project that compiles to javascript and has a library that can access HTML5 functions. It's working very nicely but there's one problem I can't solve for the life of me.

 

HTML5 loads images asynchronously and invokes a callback when the image has loaded. In the meantime it continues doing other things. This doesn't fit the scheme of my language, as it doesn't have callbacks. It does have a signal/slot system but it's not compatible with this particular system.

 

Suppose I want to load an image and get it's dimensions. This is how you'd do it in JS.

var imageObj = new Image();
imageObj.onload = function() {
    var w = this.width;
    var h = this.height;
};

But, in my language, I'd like to do it like this:

var img = new Image("test.jpg");
int width = img.Width;
int height = img.Height;

This of course is impossible because by the time I want to check the dimensions, the image hasn't actually been loaded yet, so it returns 0, 0. The only way I've found around it is to check in the main loop for when the image has been loaded, grab the necessary data and do all processing there, but damn that's ugly.

 

Does anyone have any ideas how to work around this? Once I solve this problem, I can actually make a half-decent game or app with my language, but until then it feels kinda useless.

 

Thanks

Share this post


Link to post
Share on other sites
Advertisement

In many languages, you can use simple boolean closures to wait for operations which occur on a background thread.  It will deadlock if you use it with non-threaded operations, though:

 

bool done = false;
beginAsyncOperation(args, function() { done = true; });
while (!done); // block until the thread calls our callback.

 

You can use a slight modification to this pattern in some situations to "convert" threaded operations into coroutines as well by yielding inside the while loop.

 

This might not be applicable to javascript's image loading operation - I am unfamiliar with whether it's executed via a thread, message queue, etc.

Share this post


Link to post
Share on other sites

Well, that's just how javascript is designed.There are in general no blocking operations. Everything runs on one thread and is message driven.

 

You could modify your compiler to put everything after the image load into the load-event handler though...

Share this post


Link to post
Share on other sites

An alternative to the blocking pattern I posted above is to have your compiler convert your code to continuation passing style.  This is along the same lines of thinking as what is used in C# 5 for the async/await language features.

 

An oversimplified explanation of what 'await' does in C# 5 is that it converts this:

 

statementA;
var variableB = await statementB;
var variableC = await statementC;
...

 

and turns it into:

 

statementA;
statementB(variableB =>
{
    statementC(variableC =>
    {
        ...
    });
});

 

The real conversion algorithm is much more complicated than that in order to deal with control flow constructs like if/else/while/switch/try/catch, etc.  But you can design your language however you want and don't need to necessarily support every single possibility.

Share this post


Link to post
Share on other sites

Nypyren, I can understand your first explanation but I'm not entirely sure about the second one. What is the purpose of 'await' and '=>'? Would this require all statements in my language to be essentially asynchronous?

 

Madhed,

 

I considered that but there are a few problems. First, would I put 'everything' in? Just the next few lines? There could be many statements scattered about all over the place that access the image. Not to mention that the library (for handling images etc) is separate from the compiler itself. The compiler only knows about basic types.

Share this post


Link to post
Share on other sites

What is the purpose of 'await' and '=>'?

 
"await" and "=>" probably only make sense if you've used C# before.  I'll try to explain.
 
The "x => y" operator is shorthand for "delegate(type x) { y; }".   The "type" is statically inferred from the rest of the expression (which you would not need in javascript as far as I understand).  "delegate(...)" is similar to "function(...)" in javascript.

The "await" keyword allows the programmer to tell the compiler "Ok, I'm performing an async operation but I don't want the following code in this function to execute until it's done." The compiler then rewrites the code to use callbacks and message queues which make this happen regardless of whether or not threads, coroutines, message queues, etc are involved in running the async operation.

"await" does not make the method synchronous, it just makes it look similar to synchronous code so that it's easier to write, read and maintain.
 

Would this require all statements in my language to be essentially asynchronous?


It would require that your compiler be able to take what initially appears to be normal code, and if an "await" is present, reorganize the code so that it still operates as you would expect, except asynchronously. It doesn't require a change to how the statements themselves work normally. Edited by Nypyren

Share this post


Link to post
Share on other sites

As I have long road for Javascript, I can't come with a JS based solution yet but can still suggest using some server side help via AJAX whenever applicable. (especially what you asked) Ugly but true :)

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!