IEでスタックオーバーフローを生成する画像のIHttpHandler
-
10-07-2019 - |
質問
ユーザーに提供する必要があるWebアプリケーションのコンテキスト外にあるイメージのディレクトリがあります。現在、IHttpHandlerを使用して画像を提供し、JavaScriptを使用して一連の画像をナビゲートしています(ナビゲーションは現時点ではプリミティブです)。 IHttpHandlerを使用して画像を密接に提供する例に従いましたが、Firefoxで画像を表示するとブラウザーがハングし、IEで表示すると「行でスタックオーバーフロー:0」が発生します。
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
上で定義したIHttpHandlerを呼び出しているJavaScriptコードは次のとおりです。
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;
}
最後に、「プレースホルダー」であるimgタグを次に示します。
<img src="#"
alt="Property Photo"
width="640px"
height="480px"
id="propertyImage"
onload="retrievePicture(this, '<%= pictureId.value %>');"
/>
JavaScriptが制御不能になっているように見える理由について混乱しています...
解決
私の guess -JavaScriptの専門家ではない-は、画像の読み込みが完了するたびに onload
イベントがトリガーされることです。つまり、画像が読み込まれるとすぐに、新しい画像の読み込みがトリガーされます...新しい画像の読み込みがトリガーされます...新しい画像の読み込みがトリガーされます。
おそらく、同じ画像に対するサーバーへの複数の呼び出しでそれを見ることができます-もちろん、ブラウザがそれをキャッシュしていない限り。とにかく、他の方法でトリガーするか、ロードされたイメージが既に正しいイメージであることをトリガーに検出させる必要があり、それを置き換える必要はありません。
他のヒント
srcを変更して新しいイメージをロードすると、「onload」がトリガーされる可能性があります。再び画像のイベント。
ソースを設定する前にイベントをクリアしてみてください。おそらく次のようになります。
function retrievePicture(imgCtrl, picid)
{
imgCtrl.onload = null;
imgCtrl.src = 'ShowImage.ashx?id=' + picid;
}