Issue 13653

Image not visible. Suggest doing ajax check first...

Reporter: trobertson
Assignee: mdoering
Type: Bug
Summary: Image not visible.  Suggest doing ajax check first...
Description: Image not visible.  Suggest doing ajax check first to verify it exists
Priority: Blocker
Resolution: Fixed
Status: Closed
Created: 2013-08-27 13:34:04.54
Updated: 2013-09-26 20:50:20.51
Resolved: 2013-09-26 20:50:20.476

Created: 2013-08-27 14:45:28.951
Updated: 2013-08-27 14:45:28.951
or perhaps remove it onerror

Created: 2013-08-27 14:46:20.666
Updated: 2013-08-27 14:46:20.666
relates to


Comment: we could do some ajax head request first, but this still might be slow on first lookup of the image by the cache. Ideally the cache should know if an image exists in advance. But doing a HEAD should be a lot better already at least, good idea!
Created: 2013-08-27 15:32:28.901
Updated: 2013-08-27 15:32:28.901

Author: javierarce
Created: 2013-09-03 17:15:08.96
Updated: 2013-09-03 17:15:08.96
The solution I was thinking is:

1. Hide the image by default.
2. Attempt to load it: if it fails, don't do anything; if it works, do a fade in animation and show it.

Instead #1 we could show a default image.

Created: 2013-09-03 17:43:43.42
Updated: 2013-09-03 17:43:43.42
did you ever use onerror?

Created: 2013-09-03 17:44:57.099
Updated: 2013-09-03 17:44:57.099
hiding should be done in most cases - definitely species pages.
Here it is a bit more difficult even:
 - we also need to ensure that the not found image does not make it into the gallery below
 - in case there are several images we should check if there are others that we can show at the top

Author: javierarce
Created: 2013-09-06 14:09:58.872
Updated: 2013-09-06 14:09:58.872
Ok, I've pushed a change (

Now it's possible to load an image adding a 'data-load' attribute:


That will:

1. Hide the image tag.
2. Load image.png.
3. Show image.png if the image exists and was successfully loaded.


Author: javierarce
Created: 2013-09-06 17:31:36.527
Updated: 2013-09-06 17:31:36.527
If you ever want to show a spinner instead you could do this:





And modify the loading code:

  $("img[data-load]").each(function(img) { … }

With this:

  $("img[data-load]").each(function(img) {

    var url = $(this).attr("data-load");
    $(this).attr("src", url);

    $(this).on('load', function( instance ) {

    $(this).on('error', function( instance ) {



Comment: Javier says it's fixed and the linked dataset page now doesn't have any errors (nor images). I'll call this fixed, but leave PF-174 open.
Created: 2013-09-26 20:50:20.508
Updated: 2013-09-26 20:50:20.508