IEでスタックオーバーフローを生成する画像用のIHttpHandler

Question

私は、ユーザに提供する必要のあるWebアプリケーションのコンテキスト外にある画像のディレクトリを持っています。現在、IHttpHandlerを使用して画像を提供しています。画像のセットをナビゲートするためにいくつかのjavascriptを使用しています（ナビゲーションは今のところ原始的です）。私はIHttpHandlerを使用して画像を密接に処理する例を追ってきましたが、Firefoxで画像を見るとブラウザがハングし、IEで見ると「ラインでスタックオーバーフロー：0」が表示されます。

：最後に、ここで「プレースホルダ」はimgタグだ

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

：ここIHTTPハンドラ

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 

ため

コードは、上で定義されたIHTTPハンドラを呼び出すのJavaScriptコードです

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

なぜJavaScriptが制御不能になっているように見えるのか混乱しています...

Answer 1

私の推測 - JavaScriptの専門家ではない - 画像の読み込みが完了するたびにonloadイベントがトリガーされるということです。つまり、画像がロードされるとすぐに、新しい画像をロードするトリガーが発生し、新しい画像をロードするトリガーが発生します。

これはおそらくもちろん、同じ画像のためのサーバへの複数の呼び出しで - ブラウザがキャッシュしていなければ、もちろんです。とにかく、別の方法でトリガする必要があるか、または読み込まれた画像がすでに正しい画像であることをトリガが検出して、それを置き換える必要はありません。

Answer 2

私はsrcを変更して新しいイメージをロードすると、イメージの "onload"イベントが再び発生する可能性があります。

は、ソースを設定する前にイベントをクリアしてみ、おそらく次のようになります。

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