Anyway to know if an image did NOT display in the browser?

**jscheuer1** · 02-28-2009, 07:16 PM

My thinking was that there is always a possibility that the image was only temporarily unavailable due to network traffic or whatever. If this is being used along with users uploading images, then perhaps the upload hadn't finished.

Most reasonable folks won't try too many times with a bad image, and it takes minimal server side resources anyway (depending upon what URL is entered, the server may not even need to get involved, and a 404 or other error is generally very low overhead), it is the user's browser that attempts to load the image.

I felt that there was no harm in allowing repeated validation of good images (they should now be cached on the user end anyway, so not affect the server much), but depending upon what this is used for, that could/should be changed.

For first time and previously good images, it currently only checks to see if the image is being checked, so as not to continually try to load it if it is already in the process of being loaded.

Once submitted by the user, the submit button is disabled until some result is determined.

Regardless of these various considerations, reloading the page can erase all stored information. A cookie could be used to maintain it, but with a lot of images, this could overflow the browser's cookie buffer, and the user may always clear or turn off cookies. If you want something more robust in that regard, you will need to use a server side language.

And, of course, with javascript disabled, the form will always submit, so if this is somehow crucial - again a server side language must be used.

**monaya** · 02-28-2009, 10:45 PM

Yeah I agree. I'd rather not disallow the form just in case. It just allows users to submit an http hosted URL. I just don't want anything to go through. I'll also validate the image on the server side. Is there a way to put limits on the width and height? I think I can do this on the server side as well. I'll mess with it.

**jscheuer1** · 03-01-2009, 12:14 AM

Getting the dimensions in javascript is easy once the image has loaded. Since we are already depending upon image load for approval, selecting for dimensions are minor additions (highlighted in two places, the two red 100's are the width and height limits respectively):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function validateImg(form){
   if(validateImg.loaded){
    validateImg.loaded = false;
    return true;
   }
   form.elements.sub.disabled = true;
   if(validateImg.obj[form.elements.imageURL.value + '_$_attempted']){
    if(!confirm(form.elements.imageURL.value + ' has been attempted before and failed.\n' +
    'continue anyway?')){
     form.elements.imageURL.value = '';
     return form.elements.sub.disabled = false;
    }
   else validateImg.obj[form.elements.imageURL.value] = false;
   }
   if(!validateImg.obj[form.elements.imageURL.value]){
    validateImg.obj[form.elements.imageURL.value] = true;
    var validate = new Image();
    validate.onload = function(){
     if(this.width > validateImg.wlimit || this.height > validateImg.hlimit){
      alert(form.elements.imageURL.value + ' is too large!');
      validateImg.obj[form.elements.imageURL.value + '_$_attempted'] = true;
      form.elements.sub.disabled = false;
      return;
     }
     validateImg.loaded = true;
     validateImg.obj[form.elements.imageURL.value] = form.elements.sub.disabled = false;
     form.submit();
    };
    validate.onerror = function(){
     alert("Bad Image!");
     form.elements.sub.disabled = validateImg.loaded = false;
     validateImg.obj[form.elements.imageURL.value + '_$_attempted'] = true;
    };
    validateImg.loaded = false;
    validate.src = form.elements.imageURL.value;
   }   
   return false;
}
validateImg.obj = [];
validateImg.wlimit = 100;
validateImg.hlimit = 100;
</script>
</head>
<body>
<form action="#" onsubmit="return validateImg(this);">
<div>
<input type="text" name="imageURL"><input name="sub" type="submit" value="Validate!">
</div>
</form>
</body>
</html>

Note: I also changed all instances of:

Code:

["imageURL"]

to:

Code:

.imageURL

because they are equivalent in the code as written (this would only change if the name of that input could vary, and then a slightly different syntax would be required anyway) and the latter is slightly more efficient in this case.

**monaya** · 03-05-2009, 03:29 PM

In Firefox, this code now seems to be blocking the submit even if the user clicks to continue anyway. It gives them the bad image alert no matter. Here's my code:

Code:

function validateImg(form){
  document.getElementById('loadingmsg').innerHTML = "<img src='images/loading.gif' /> Validating... ";

   if(validateImg.loaded){
    validateImg.loaded = false;
    return true;
   }
   form.elements.sub.disabled = true;
   if(validateImg.obj[form.elements["externalthumb"].value + '_$_attempted']){
    if(!confirm(form.elements["externalthumb"].value + ' has been attempted before and failed.\n' +
    'continue anyway?')){
     form.elements["externalthumb"].value = '';
     return form.elements.sub.disabled = false;
    }
   else validateImg.obj[form.elements["externalthumb"].value] = false;
   }
   if(!validateImg.obj[form.elements["externalthumb"].value]){
    validateImg.obj[form.elements["externalthumb"].value] = true;
    var validate = new Image();
    validate.onload = function(){
     validateImg.loaded = true;
     validateImg.obj[form.elements["externalthumb"].value] = form.elements.sub.disabled = false;
     form.submit()
    };
    validate.onerror = function(){
     alert("The URL to your thumbnail doesn't exist!");
	   document.getElementById('loadingmsg').innerHTML = "";
     form.elements.sub.disabled = validateImg.loaded = false;
     validateImg.obj[form.elements["externalthumb"].value + '_$_attempted'] = true;
    };
    validateImg.loaded = false;
    validate.src = form.elements["externalthumb"].value;
   }   
   return false;
}
validateImg.obj = [];

Code:

<input name="sub" type="submit" id="sub" value="upload embed code" onclick="this.disabled = disabled;"/>

**jscheuer1** · 03-05-2009, 04:04 PM

Then go back to the code as shown previously. It was written and tested in FF, then checked in IE, Opera.

One thing I can tell you though, this was designed with a live URL for the image in mind, not a local one. I don't know about a text input, but with a file input (I was playing with the code a bit), FF would only show files in the same folder as the page. This is due to security measures of that browser, Opera was the same.

**monaya** · 03-05-2009, 04:17 PM

Hmm. I'm pretty sure that was the original code. Let me double check.

**monaya** · 03-05-2009, 05:06 PM

Originally Posted by jscheuer1

Then go back to the code as shown previously. It was written and tested in FF, then checked in IE, Opera.
One thing I can tell you though, this was designed with a live URL for the image in mind, not a local one.

yes I'm only concerned about a live url.

jscheuer1 please double check I tried using the original code and I see the same problem in Firefox and Safari. It just keeps saying bad image after clicking OK. I guess the code that checks for the image seems to always execute.

I don't know about IE because its not installed on the mac.

**monaya** · 03-05-2009, 05:19 PM

Also after upgrading to Firefox 3.0.7, buttons that are disabled are never reenabled through javascript, although there are no problems with Safari and IE.

once you disable like:

Code:

form.elements.sub.disabled = true;

the following does not re-enable:

Code:

form.elements.sub.disabled = false;

I love Firefox, but it does some quirky things with javascipt now I'm realizing. Pretty annoying not to be able to re-enable a button after a failed authentication.

**monaya** · 03-05-2009, 05:38 PM

Another bug I found is that when you do get the prompt to CANCEL or CONTINUE ANYWAY, and click CANCEL, the submit button no longer submits the form. This happens in IE too.

**jscheuer1** · 03-05-2009, 05:41 PM

None of that is happening here, I just upgraded to FF 3.0.7. Here is my current working code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function validateImg(form){
   if(validateImg.loaded){
    validateImg.loaded = false;
    return true;
   }
   form.elements.sub.disabled = true;
   if(validateImg.obj[form.elements.imageURL.value + '_$_attempted']){
    if(!confirm(form.elements.imageURL.value + ' has been attempted before and failed.\n' +
    'continue anyway?')){
     form.elements.imageURL.value = '';
     return form.elements.sub.disabled = false;
    }
   else validateImg.obj[form.elements.imageURL.value] = false;
   }
   if(!validateImg.obj[form.elements.imageURL.value]){
    validateImg.obj[form.elements.imageURL.value] = true;
    var validate = new Image();
    validate.onload = function(){
     if(this.width > validateImg.wlimit || this.height > validateImg.hlimit){
      alert(form.elements.imageURL.value + ' is too large!');
      validateImg.obj[form.elements.imageURL.value + '_$_attempted'] = true;
      form.elements.sub.disabled = false;
      return;
     }
     validateImg.loaded = true;
     validateImg.obj[form.elements.imageURL.value] = form.elements.sub.disabled = false;
     form.submit();
    };
    validate.onerror = function(){
     alert('Bad Image!');
     form.elements.sub.disabled = validateImg.loaded = false;
     validateImg.obj[form.elements.imageURL.value + '_$_attempted'] = true;
    };
    validateImg.loaded = false;
    validate.src = form.elements.imageURL.value;
   }   
   return false;
}
validateImg.obj = {};
validateImg.wlimit = 1500;
validateImg.hlimit = 1500;
</script>
</head>
<body>
<form action="#" onsubmit="return validateImg(this);">
<div>
<input type="text" name="imageURL"><input name="sub" type="submit" value="Validate!">
</div>
</form>
</body>
</html>

Thread: Anyway to know if an image did NOT display in the browser?

Thread Tools

Search Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions