javascript - 如果 php 在 javascript 中没有应答，则设置图像

Question

我在 php 中有一个脚本来创建图形(使用 jpgraph)，并且我使用 javascript 在我的页面中设置该图像:

$("#page_image").attr('src', "generate_graph.php");

有时我的服务器无法工作，我得到一个绿色图像告诉我错误，而其他人我得到的只是一个崩溃图标图像(未找到图像等)。

是否可以设置超时，如果几秒钟后我什么也没得到，则设置已创建的备份镜像？

或者，我必须在 php 服务器端执行此操作吗？

Answer 1

简单地使用 .load() 和 setTimeout()

$(function(){

  var imageLoadTimeout = 1000; // millisecs
  
  // Timeout, if image not loaded in imageLoadTimeout time then we display error.jpg
  var timeout = setTimeout(function(){
     $("#page_image").attr("src", "error.jpg");
  }, imageLoadTimeout);
  
  
  $("#page_image").load(function(){
    clearTimeout(timeout);  // if image loaded sucessfully, clear the timeout
  });
  
  $("#page_image").attr("src", "generate_graph.php"); // Try to load image
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="page_image" />