IHttpHandler for images producing a stackoverflow in IE

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;
}