IHttpHandler per immagini che producono uno stackoverflow in IE

Question

Ho una directory di immagini che risiedono al di fuori del contesto della mia applicazione web che devo servire all'utente. Attualmente sto usando un IHttpHandler per servire le immagini e sto usando un po 'di javascript per navigare attraverso una serie di immagini (la navigazione è per ora primitiva). Ho seguito esempi di utilizzo di IHttpHandler per servire da vicino le immagini ma quando visualizzo le immagini in Firefox il browser si blocca e quando visualizzo in IE ottengo un "overflow dello stack alla riga: 0".

Codice per 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

Ecco il codice javascript che chiama IHttpHandler sopra definito:

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

Infine, ecco il tag img che è il "segnaposto":

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

Sono confuso sul perché il javascript sembra sfuggire al controllo ...

Answer 1

La mia ipotesi - non essendo un esperto JavaScript - è che l'evento onload viene attivato ogni volta che il caricamento dell'immagine termina. In altre parole, non appena l'immagine viene caricata, si avvia il caricamento di una nuova ... che avvia il caricamento di una nuova ... che avvia il caricamento di una nuova ecc.

Probabilmente sarai in grado di vederlo in più chiamate al server per la stessa immagine, a meno che il browser non lo stia memorizzando nella cache, ovviamente. Ad ogni modo, dovrai attivarlo in qualche altro modo o far rilevare al trigger che l'immagine che è stata caricata è già quella giusta e non è necessario sostituirla.

Answer 2

Sospetto che l'atto di modificare l'src e il caricamento di una nuova immagine possa innescare il "caricamento". evento dell'immagine di nuovo.

Prova a cancellare l'evento prima di impostare l'origine, probabilmente avrà un aspetto simile al seguente:

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