为什么javascript忽略了订单？

Question

I have a webpage: index.php. In this page there is a point where i need a custom image that must be generated on the fly.

I have a file: im_gen.php. This file outputs an image using the php image functions. I am sending parameters via $_GET. The image changes when certain events happen and must be regenerated.

I call the file using the <img src=""> property.

Everything works fine. BUT, what i want, is a way to show a loader to the user, while the image is beign generated. I think the best way to do this is to use something like:

document.getElementById("loader").innerHTML = "LOADING" //to show the loader and 
document.getElementById("loader").innerHTML = "DONE"; //to show when the image is generated

I am doing everything it this way:

<?php include 'im_gen.php'; ?>
...
<script>
...
var x = 15;
document.getElementById("loader").innerHTML = "LOADING" //start loading
document.getElementById("image").src = "<?php get_i("+x+"); ?>"; //change the image
document.getElementById("loader").innerHTML = "DONE"; //image change done
...
</script>
...

BUT, for some reason javascript executes the 7th and 8th line at the same time. The result is, Always DONE is show and there is no loader, ever when the image loads.

What I am doing wrong here?

Answer 1

Your problem is that changing the src of an image tag is what's called asynchronous - it starts the load, and then keeps going, rather than wait for the loading to finish. This means that the innerHTML = "DONE" runs as soon as the load starts, rather than waiting for it to finish. You'll need to use an onload event to change the loader.