IHttpHandler für Bilder mit einer Stackoverflow in IE Herstellung
-
10-07-2019 - |
Frage
Ich habe ein Verzeichnis von Bildern, die außerhalb des Kontexts meiner Web-Anwendung befinden, die ich für den Benutzer dienen müssen. Derzeit eine IHttpHandler Ich verwende die Bilder und verwenden einige Javascript zu dienen, durch eine Reihe von Bildern zu navigieren (die Navigation ist jetzt primitive). Ich folgte Beispielen für IHttpHandler mit Bildern genau zu dienen, aber wenn ich die Bilder in Firefox sehe der Browser hängt und wenn ich im Internet Explorer sehe ich einen „Stack-Überlauf in Zeile: 0“ erhalten.
Code für 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
Hier ist die Javascript-Code, der die IHttpHandler ruft vorstehend definiert ist:
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;
}
hier ist schließlich der img-Tag, das die "Platzhalter" ist:
<img src="#"
alt="Property Photo"
width="640px"
height="480px"
id="propertyImage"
onload="retrievePicture(this, '<%= pictureId.value %>');"
/>
Ich bin verwirrt, warum die Javascript scheint außer Kontrolle zu geraten ...
Lösung
Mein erraten - kein JavaScript-Experte zu sein - ist, dass das onload
Ereignis jederzeit ausgelöst wird das Bild fertig geladen. Mit anderen Worten, sobald das Bild geladen wird, löst es einen neuen Laden ..., die einen neuen Trigger geladen ... die eine neue etc Trigger geladen werden.
Sie werden wahrscheinlich in der Lage sein, dass für das gleiche Bild auf den Server in mehr Anrufen zu sehen - es sei denn, der Browser wird das Caching, natürlich. Wie auch immer, müssen Sie entweder es auf andere Weise auszulösen, oder der Auslöser machen erkennen, dass das Bild, das ist schon die richtige geladen ist, und es gibt keine Notwendigkeit, sie zu ersetzen.
Andere Tipps
Ich vermute, dass der Akt des das src ändern und ein neues Bild laden kann wieder das „onload“ -Ereignis des Bildes auslösen werden.
Versuchendas Ereignis Löschen vor Einstellung der Quelle, wird wahrscheinlich ähnlich wie folgt aussehen:
function retrievePicture(imgCtrl, picid)
{
imgCtrl.onload = null;
imgCtrl.src = 'ShowImage.ashx?id=' + picid;
}