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 回答