set image if php doesn't answer in javascript

Question

I have a script in php to create a graph (with jpgraph) and I use javascript to set that image in my page:

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

Sometimes my server doesn't work and I got a green image telling me the error and others I got just a crash icon image (not image found or so).

Is it possible to set a timeout and if after some seconds I got nothing, set a backup image already created?

Or, must I do it in php server side?

possible duplicate of Fallback for 404 images

Robert Moskal
– Robert Moskal

2015-04-18 14:25:31 +00:00
Commented Apr 18, 2015 at 14:25 — Robert Moskal
– Robert Moskal, Commented Apr 18, 2015 at 14:25
What about using onerror html attribute?

Anakin
– Anakin

2015-04-18 14:28:04 +00:00
Commented Apr 18, 2015 at 14:28 — Anakin
– Anakin, Commented Apr 18, 2015 at 14:28

Pethical · Accepted Answer · 2015-04-18 14:36:39Z

1

Simple use .load() with 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" />

answered Apr 18, 2015 at 14:36

Pethical

1,49211 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jcubic · Accepted Answer · 2015-04-18 14:35:41Z

0

You can try error event:

$("#page_image").attr('src', "generate_graph.php").on('error', function() {
   $(this).attr('src', 'defaultimage.png');
});

answered Apr 18, 2015 at 14:35

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

Collectives™ on Stack Overflow

set image if php doesn't answer in javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related