IHttpHandler para imagens produzindo uma stackoverflow no IE

Question

Eu tenho um diretório de imagens que residem fora do contexto da minha aplicação web que eu preciso para servir ao usuário. Atualmente estou usando um IHttpHandler para servir as imagens e usar algum javascript para navegar através de um conjunto de imagens (a navegação é primitiva por agora). Segui exemplos para usar IHttpHandler para servir imagens de perto, mas quando eu ver as imagens no firefox os trava navegador e quando eu ver no IE eu recebo um "estouro de pilha na linha: 0".

código para o 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

Aqui está o código javascript que está chamando o IHttpHandler definido acima:

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 aqui está a tag img que é o "espaço reservado":

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

Estou confuso sobre o porquê o javascript parece fora espiral de controle ...

Answer 1

Meu palpite - não sendo um especialista em JavaScript - é que o evento onload é acionada a qualquer momento a imagem terminar o carregamento. Em outras palavras, assim que a imagem é carregada, ele aciona o carregamento de um novo ... o que desencadeia o carregamento de um novo ... o que desencadeia o carregamento de um novo etc.

Você provavelmente vai ser capaz de ver que em várias chamadas para o servidor para a mesma imagem - a menos que o navegador é o cache-lo, é claro. De qualquer forma, você quer necessidade de acioná-lo de alguma outra forma, ou fazer o gatilho detectar que a imagem que foi carregado já é o caminho certo, e não há necessidade de substituí-lo.

Answer 2

Eu suspeito que o ato de mudar o src e carregar uma nova imagem pode estar provocando o "onload" caso da imagem novamente.

Tente limpar o evento antes de definir a fonte, provavelmente será semelhante a esta:

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