Author: mdoering@gbif.org
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.
Author: mdoering@gbif.org
Created: 2013-09-03 17:43:43.42
Updated: 2013-09-03 17:43:43.42
did you ever use onerror?
http://stackoverflow.com/questions/9022427/see-if-src-of-img-exists
Author: mdoering@gbif.org
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 (https://code.google.com/p/gbif-portal/source/detail?r=1975).
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:
Replace:
With:
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).fadeIn(250);
});
$(this).on('error', function( instance ) {
$(this).fadeOut(250);
});
});
Author: omeyn@gbif.org
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
That will:
1. Hide the image tag.
2. Load image.png.
3. Show image.png if the image exists and was successfully loaded.
With:
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).fadeIn(250);
});
$(this).on('error', function( instance ) {
$(this).fadeOut(250);
});
});