Library code snippets
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>
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 ...
Related articles
Related discussion
-
VB.NET: Hide and show table using radio buttons
by converter2009 (1 replies)
-
Java Script, File uploading on ftp server using java script code
by h_c_a_andersen (2 replies)
-
.NET Developer in Ghana Required....
by sysview (0 replies)
-
Problem when using TemplateField and ImageButton
by ashiquemca (15 replies)
-
problem with special characters
by avlisodraude (1 replies)
Related podcasts
-
Raleigh Code Camp reflections, Chrome wins speed tests, GroovyMag
I attended the Raleigh Code Camp last week and had a blast meeting some awesome people (but of course there's never enough time to meet everyone you'd like to!). Some great sessions I attended covered the MS MVC platform and an introduction to MS DLR, both of which I discuss here in a bit more d...
Events coming up
-
Dec
8
December Silicon Valley Ruby Meetup
Moffett Field, United States
In a World of Middleware, Who Needs Monolithic Applications? by Jon Crosby With Rack emerging as the standard for composing web applications and services, most recently with Rails adoption, an architectural shift is taking place. Learn how to create next generation web services by reusing existing Rack middleware and supplementing with your own components and micro-frameworks like Sinatra. Bio : Jon likes music, the Open Web, Ruby, Erlang, Haskell, Objective-C, JavaScript and coffee.
This method is available in Microsoft Internet Explorer only - for Netscape compatible browsers (anything on the Mozilla code-base such as Netscape, Mozilla Firebird, etc.) wait until the image is loaded and check the images' .naturalWidth and .naturalHeight properties. These reflect the actual dimensions of the image regardless of any resizing done by the browser, and will be 0 if a null (nonexistent) image is holding the place.
But then, these methods are only available in the Mozilla base.
Very nice article which resolved my problem
This thread is for discussions of Detect missing images with client-side script.