0

我有一个网页：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 行。结果是，始终显示始终完成并且没有加载程序，无论何时加载图像。

我在这里做错了什么？

4

2 回答 2

0

您的问题是更改src图像标签的内容是所谓的异步 - 它开始加载，然后继续进行，而不是等待加载完成。这意味着innerHTML = "DONE"负载一开始就运行，而不是等待它完成。您需要使用onload事件来更改加载程序。

于 2013-11-07T17:21:47.980 回答
0

您必须使用异步 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
于 2013-11-07T17:22:00.340 回答