Question

我有一个网页：index.php。在此页面中，我需要一个必须立即生成的自定义图像。

我有一个文件：im_gen.php。此文件使用 php图像函数输出图像。我通过$_GET发送参数。 图像会在发生某些事件时发生变化，必须重新生成。

我使用<img src="">属性调用该文件。

一切正常。但是，我想要的是一种向用户显示加载器的方法，同时图像是生成的。我认为最好的方法是使用类似的东西：

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

我正在这样做：

<?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>
...

但是，由于某些原因，javascript同时执行第7行和第8行。结果是，在图像加载时，Always DONE显示并且没有加载器。

我在这里做错了什么？

Answer 1

您的问题是更改图像标记的src就是所谓的异步 - 它会启动加载，然后继续运行，而不是等待加载完成。这意味着innerHTML = "DONE"会在加载开始时立即运行，而不是等待它完成。您需要使用onload事件来更改加载程序。

Answer 2

您必须使用异步javascript：

var loader = document.getElementById("loader"),
    image = document.getElementById("image");
loader.innerHTML = "LOADING" //start loading
image.onload = function() {
    loader.innerHTML = "DONE"; //image change done
};
image.src = "<?php get_i("+x+"); ?>"; //change the image

为什么javascript忽略了订单？

2 个答案: