IHttpHandler for images producing a stackoverflow in IE - asp.net

Question

I have a directory of images that reside outside the context of my web application that I need to serve to the user. Currently I'm using an IHttpHandler to serve the images and using some javascript to navigate through a set of images (the navigation is primitive for now). I followed examples for using IHttpHandler to serve images closely but when I view the images in firefox the browser hangs and when I view in IE I get a "Stack overflow at line: 0".
Code for the IHttpHandler
Public Class ShowImage : Implements IHttpHandler
Public Sub ProcessRequest(ByVal context As HttpContext) _
Implements IHttpHandler.ProcessRequest
Dim picid As String
If context.Request.QueryString("id") IsNot Nothing Then
picid = context.Request.QueryString("id")
Else
Throw New ArgumentException("No parameter specified")
End If
'' Convert Byte[] to Bitmap
context.Response.Cache.SetCacheability(HttpCacheability.NoCache)
context.Response.Cache.SetNoStore()
context.Response.Cache.SetExpires(DateTime.MinValue)
Dim newBmp As Bitmap = GetPhoto(picid)
If newBmp IsNot Nothing Then
Dim imgGraphics As Graphics = Graphics.FromImage(newBmp)
imgGraphics.DrawImageUnscaled(newBmp, 0, 0, 640, 480)
context.Response.StatusCode = 200
context.Response.ContentType = "image/jpeg"
newBmp.Save(context.Response.OutputStream, ImageFormat.Jpeg)
newBmp.Dispose()
Else
'' Return 404
context.Response.StatusCode = 404
context.Response.End()
End If
End Sub
...
Public ReadOnly Property IsReusable() As Boolean _
Implements IHttpHandler.IsReusable
Get
Return True
End Get
End Property
End Class
Here is the javascript code that's calling the IHttpHandler defined above:
function updateImage(){
var ddlPhotos = document.getElementById("ddlPhotos");
var selected = ddlPhotos.options[ddlPhotos.selectedIndex].value;
if( selected != -1 ){
// Update the image
retrievePicture(document.getElementById("propertyImage"), selected)
}
}
function retrievePicture(imgCtrl, picid)
{
imgCtrl.src = 'ShowImage.ashx?id=' + picid;
}
Finally here's the img tag that is the "place holder":
<img src="#"
alt="Property Photo"
width="640px"
height="480px"
id="propertyImage"
onload="retrievePicture(this, '<%= pictureId.value %>');"
/>
I'm confused as to why the javascript seems to spiral out of control...

Answer 1

My guess - not being a JavaScript expert - is that the onload event is triggered any time the image finishes loading. In other words, as soon as the image is loaded, it triggers loading a new one... which triggers loading a new one... which triggers loading a new one etc.
You will probably be able to see that in multiple calls to the server for the same image - unless the browser is caching it, of course. Anyway, you'll either need to trigger it in some other way, or make the trigger detect that the image which has been loaded is already the right one, and there's no need to replace it.

Answer 2

I suspect the act of changing the src and loading a new image may be triggering the "onload" event of the image again.
Try clearing the event before setting the source, will probably look similar to this:
function retrievePicture(imgCtrl, picid)
{
imgCtrl.onload = null;
imgCtrl.src = 'ShowImage.ashx?id=' + picid;
}