IHttpHandler pour les images produisant un stackoverflow dans IE

Question

J'ai un répertoire d'images hors du contexte de mon application Web que je dois transmettre à l'utilisateur. Actuellement, j'utilise un IHttpHandler pour diffuser les images et javascript est utilisé pour naviguer dans un ensemble d'images (la navigation est pour le moment primitive). J'ai suivi des exemples d'utilisation d'IHttpHandler pour traiter des images de près, mais lorsque je visualise les images dans firefox, le navigateur se bloque et lorsque je visualise dans IE, le message "Stack Overflow at the line: 0" est affiché.

Code pour 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

Voici le code javascript qui appelle le IHttpHandler défini ci-dessus:

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

Enfin, voici la balise img qui est le "lieu réservé":

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

Je ne comprends pas pourquoi le javascript semble échapper à tout contrôle ...

Answer 1

Mon deviner - n'étant pas un expert en JavaScript - signifie que l'événement onload est déclenché chaque fois que le chargement de l'image est terminé. En d’autres termes, dès que l’image est chargée, elle en déclenche le chargement ... ce qui en déclenche le chargement ... ce qui en déclenche le chargement, etc.

Vous pourrez probablement voir cela dans plusieurs appels au serveur pour la même image - à moins que le navigateur ne la mette en cache, bien sûr. Quoi qu'il en soit, vous devrez soit la déclencher autrement, soit faire en sorte que le déclencheur détecte que l'image qui a été chargée est déjà la bonne, sans qu'il soit nécessaire de la remplacer.

Answer 2

Je soupçonne que l'acte de changer le src et de charger une nouvelle image peut déclencher le "onload". événement de l'image à nouveau.

Essayez de supprimer l'événement avant de définir la source. Cela ressemblera probablement à ceci:

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