IE에서 StackOverflow를 생성하는 이미지를위한 ihttphandler

Question

사용자에게 제공 해야하는 웹 응용 프로그램의 컨텍스트 외부에있는 이미지 디렉토리가 있습니다. 현재 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가 통제 불능 상태로 보이는지에 대해 혼란스러워합니다 ...

Answer 1

나의 추측 - 자바 스크립트 전문가가 아닙니다. onload 이미지가로드가 완료 될 때마다 이벤트가 트리거됩니다. 다시 말해서, 이미지가로드 되 자마자 새로운 것을로드하는 것을 트리거합니다 ... 새 제품을로드하는 데 트리거됩니다.

브라우저가 캐싱되지 않는 한, 동일한 이미지에 대해 서버로 여러 호출을 볼 수있을 것입니다. 어쨌든, 다른 방법으로 트리거하거나 트리거가 이미지가 이미 올바른 이미지임을 감지해야하며 교체 할 필요가 없습니다.

Answer 2

SRC를 변경하고 새 이미지를로드하는 행위가 이미지의 "Onload"이벤트를 다시 트리거 할 수 있다고 생각합니다.

소스를 설정하기 전에 이벤트를 지우십시오. 아마도 이것과 비슷해 보일 것입니다.

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