I have the following mechanism in place which keeps trying to load an image with a delay between retries for a maximum of 10 attempts.
<img onerror ="imgError(this);" />
<script type='text/javascript'>
function imgError(image) {
if (!image.hasOwnProperty('retryCount')){
image.retryCount = 0;
}
if (image.retryCount < 10){
setTimeout(function (){
image.src += '?' + +new Date;
image.retryCount += 1;
}, 1000);
}
}
</script>
This works great, the only problem is that the first time the image fails to load an error icon is displayed. This is really ugly as you can see in the following screenshot.
A few seconds later, when the image pops into existence (generated as a thumbnail from a larger image using AWS lambda), it is loaded and displayed successfully.
My question is how can I avoid the ugly intermediate broken image icon from displaying? I would prefer for either nothing to display or some text saying "generating thumbnail...".