1

ユーザーに提供する必要がある 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が制御不能になっているように見える理由について、私は混乱しています...

4

2 に答える 2

2

JavaScript の専門家ではない私の推測onloadでは、画像の読み込みが完了するたびにイベントがトリガーされるということです。言い換えれば、画像が読み込まれるとすぐに、新しい画像の読み込みがトリガーされます...新しい画像の読み込みがトリガーされます...新しい画像の読み込みなどがトリガーされます.

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

于 2009-06-24T14:18:29.397 に答える
0

src を変更して新しいイメージをロードする行為が、イメージの「onload」イベントを再びトリガーしている可能性があると思われます。

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

function retrievePicture(imgCtrl, picid)
{
    imgCtrl.onload = null;
    imgCtrl.src = 'ShowImage.ashx?id=' + picid;
}
于 2009-06-24T14:21:57.237 に答える