Question

我有一个php文件生成图表作为图像 - 这工作正常这个php文件必须与javascript（通过ajax）进行通信才能在html中加载这个图像

最初，我把它放在javascript：

中

document.getElementById("img3").src="ajax.php?area=" +encodeURIComponent(area);

其中img3是html中的图像，ajax.php是生成图像的php文件

此代码的问题是，在加载图像之前执行上述代码之后会有几行 - 这是一个计时问题。

将javascript / ajax代码更改为：

ar = new XMLHttpRequest();
if(ar.readyState == 4 || ar.readyState == 0)
{
     ar.open("GET", "ajax.php?area=" +encodeURIComponent(area), true);
     ar.send(null);
     ar.onreadystatechange = function()
     {
          if(ar.readyState == 4)
          {
               document.getElementById("img3").src = ar.response;
          }// end if
     }// end function
}// end if

希望我可以将我的代码行放在if（ar.readyState == 4）块中，这将解决时序问题。但图像没有加载。有什么想法吗？

Answer 1

我知道你并不真正关心如何加载图像（使用src或ajax），但你想要的是在图像加载后执行一段代码。

有几种（一些比其他更好）检查图像是否加载的方法。 This tread涵盖其中一些内容。

例如，您可以使用onload事件来触发一段代码

document.getElementById("img").onload = function() { 
    //do the code which has to be executed after loading the image. 
}

它们描述了当图像从缓存加载时事件未触发的一些问题，但浏览器（几乎）从不缓存带有get参数的.php文件。您应该检查缓存是否是您项目的问题，基于我从您的项目中了解我认为这不是问题。

他们建议其他有趣的选项。有一个我觉得有趣，他们建议使用imageloaded。该解决方案看起来非常可靠

使用AJAX将生成的图像从PHP传递回javascript

1 个答案: