IHttpHandler для изображений, создающих стекопоток в IE
-
10-07-2019 - |
Вопрос
У меня есть каталог изображений, который находится вне контекста моего веб-приложения и который я должен предоставить пользователю. В настоящее время я использую 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 выходит из-под контроля ...
Решение
Моя догадка - не будучи экспертом по JavaScript - это то, что событие onload
запускается каждый раз, когда изображение завершает загрузку. Другими словами, как только изображение загружается, оно запускает загрузку нового ... которое запускает загрузку нового ... которое запускает загрузку нового и т. Д.
Вы, вероятно, сможете увидеть это при нескольких обращениях к серверу для одного и того же изображения - если, конечно, браузер не кеширует его, конечно. В любом случае вам нужно будет либо запустить его каким-либо другим способом, либо заставить триггер обнаружить, что загруженное изображение уже является правильным, и нет необходимости его заменять.
Другие советы
Я подозреваю, что изменение src и загрузка нового изображения может вызвать "onload" событие изображения снова.
Попробуйте очистить событие перед установкой источника, возможно, оно будет выглядеть примерно так:
function retrievePicture(imgCtrl, picid)
{
imgCtrl.onload = null;
imgCtrl.src = 'ShowImage.ashx?id=' + picid;
}