IHttpHandler для изображений, создающих стекопоток в IE

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

Вот код javascript, который вызывает определенный выше IHttpHandler:

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

Моя догадка - не будучи экспертом по JavaScript - это то, что событие onload запускается каждый раз, когда изображение завершает загрузку. Другими словами, как только изображение загружается, оно запускает загрузку нового ... которое запускает загрузку нового ... которое запускает загрузку нового и т. Д.

Вы, вероятно, сможете увидеть это при нескольких обращениях к серверу для одного и того же изображения - если, конечно, браузер не кеширует его, конечно. В любом случае вам нужно будет либо запустить его каким-либо другим способом, либо заставить триггер обнаружить, что загруженное изображение уже является правильным, и нет необходимости его заменять.

Answer 2

Я подозреваю, что изменение src и загрузка нового изображения может вызвать "onload" событие изображения снова.

Попробуйте очистить событие перед установкой источника, возможно, оно будет выглядеть примерно так:

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