IHttpHandler für Bilder mit einer Stackoverflow in IE Herstellung

Question

Ich habe ein Verzeichnis von Bildern, die außerhalb des Kontexts meiner Web-Anwendung befinden, die ich für den Benutzer dienen müssen. Derzeit eine IHttpHandler Ich verwende die Bilder und verwenden einige Javascript zu dienen, durch eine Reihe von Bildern zu navigieren (die Navigation ist jetzt primitive). Ich folgte Beispielen für IHttpHandler mit Bildern genau zu dienen, aber wenn ich die Bilder in Firefox sehe der Browser hängt und wenn ich im Internet Explorer sehe ich einen „Stack-Überlauf in Zeile: 0“ erhalten.

Code für 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

Hier ist die Javascript-Code, der die IHttpHandler ruft vorstehend definiert ist:

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

hier ist schließlich der img-Tag, das die "Platzhalter" ist:

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

Ich bin verwirrt, warum die Javascript scheint außer Kontrolle zu geraten ...

Answer 1

Mein erraten - kein JavaScript-Experte zu sein - ist, dass das onload Ereignis jederzeit ausgelöst wird das Bild fertig geladen. Mit anderen Worten, sobald das Bild geladen wird, löst es einen neuen Laden ..., die einen neuen Trigger geladen ... die eine neue etc Trigger geladen werden.

Sie werden wahrscheinlich in der Lage sein, dass für das gleiche Bild auf den Server in mehr Anrufen zu sehen - es sei denn, der Browser wird das Caching, natürlich. Wie auch immer, müssen Sie entweder es auf andere Weise auszulösen, oder der Auslöser machen erkennen, dass das Bild, das ist schon die richtige geladen ist, und es gibt keine Notwendigkeit, sie zu ersetzen.

Answer 2

Ich vermute, dass der Akt des das src ändern und ein neues Bild laden kann wieder das „onload“ -Ereignis des Bildes auslösen werden.

Versuchen

das Ereignis Löschen vor Einstellung der Quelle, wird wahrscheinlich ähnlich wie folgt aussehen:

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