IHttpHandler para imágenes que producen un stackoverflow en IE

Question

Tengo un directorio de imágenes que residen fuera del contexto de mi aplicación web que necesito servir al usuario. Actualmente estoy usando un IHttpHandler para servir las imágenes y estoy usando JavaScript para navegar a través de un conjunto de imágenes (la navegación es primitiva por ahora). Seguí ejemplos para usar IHttpHandler para servir imágenes de cerca, pero cuando veo las imágenes en Firefox, el navegador se cuelga y cuando veo en IE obtengo un desbordamiento de pila en la línea: 0 ''.

Código para el 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

Aquí está el código javascript que llama al IHttpHandler definido anteriormente:

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

Finalmente, aquí está la etiqueta img que es el " marcador de posición " ;:

<img src="#" 
     alt="Property Photo" 
     width="640px" 
     height="480px" 
     id="propertyImage" 
     onload="retrievePicture(this, '<%= pictureId.value  %>');"
/>

No estoy seguro de por qué el javascript parece estar fuera de control ...

Answer 1

Mi adivinar , no ser un experto en JavaScript, es que el evento onload se activa cada vez que la imagen termina de cargarse. En otras palabras, tan pronto como se carga la imagen, se activa la carga de una nueva ... lo que provoca la carga de una nueva ... lo que provoca la carga de una nueva, etc.

Probablemente podrá ver eso en varias llamadas al servidor para la misma imagen, a menos que el navegador la almacene en caché, por supuesto. De todos modos, deberá activarlo de alguna otra manera, o hacer que el activador detecte que la imagen que se ha cargado ya es la correcta, y no es necesario reemplazarla.

Answer 2

Sospecho que el acto de cambiar el src y cargar una nueva imagen puede estar activando la "carga". evento de la imagen nuevamente.

Intente borrar el evento antes de configurar la fuente, probablemente será similar a esto:

function retrievePicture(imgCtrl, picid)
{
    imgCtrl.onload = null;
    imgCtrl.src = 'ShowImage.ashx?id=' + picid;
}