IHttpHandler pour les images produisant un stackoverflow dans IE

Question

J'ai un répertoire d'images qui résident en dehors du contexte de mon application web que je dois servir à l'utilisateur. Actuellement, j'utilise un IHttpHandler pour servir les images et utiliser du javascript pour naviguer dans un ensemble d'images (la navigation est primitive pour l'instant). J'ai suivi des exemples pour utiliser IHttpHandler pour servir des images de près, mais quand je vois les images dans firefox le navigateur se bloque et quand je vois dans IE je reçois un "dépassement de pile à la ligne: 0".

Code pour la 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 vous 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 "détenteur de place":

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

Je suis confus quant à savoir pourquoi le javascript semble échapper à tout contrôle ...

Answer 1

- n'étant pas un expert JavaScript - l'événement onload est déclenché à chaque fois que l'image est chargée. En d'autres termes, dès que l'image est chargée, elle déclenche le chargement d'une nouvelle ... ce qui déclenche le chargement d'une nouvelle ... qui déclenche le chargement d'une nouvelle, etc.

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

Answer 2

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

Essayez d'effacer l'événement avant de la source, sera probablement semblable à ceci:

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