Detect missing images with client-side script

In previous tips, we've shown you how to determine whether a file exists programmatically by using either the MSWC.Tools object or the Scripting.FileSystemObject object. Both have their place, but what if you need to make this determination in DHTML on the client side? A good example of this situation is when you need to ascertain whether an image exists before displaying it. Nobody likes seeing broken image links, but how can you trap this condition programmatically?  In DHTML, the <img> tag fires an OnError event anytime the image cannot be loaded. This can occur either because the src attribute of the <img> element points to a file that doesn't exist, because of a timeout, or because of another error. Detecting the problem, however, allows you to take some action before the element is rendered.  You could substitute another image, change the value of the image's alt attribute, or (as shown below) simply prevent the element from being rendered at all.

<html>
  <head>
    <script language="JavaScript">
      function ImageLoadFailed() {
        window.event.srcElement.style.display = "None";
      }
    </script>
  </head>
  <body>
    <img
      src="http://localhost/images/nonexistingimage.gif"
      OnError="ImageLoadFailed()">
  </body>
</html>

You might also like...

Comments

James Crowley James first started this website when learning Visual Basic back in 1999 whilst studying his GCSEs. The site grew steadily over the years while being run as a hobby - to a regular monthly audience ...

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“Engineers are all basically high-functioning autistics who have no idea how normal people do stuff.” - Cory Doctorow