Problem loading an image from client side code

A

Adam Sandler

Hello,

Having an issue with JavaScript in my ASP.Net page.

I use some COTS, which for all intents and purposes, simply makes a
jpeg file and physically places it in a directory on the web server.

The page load codebehind, makes a connection to the jpeg creation
service and gets the path of the newly created image.

The sample code I'm providing is very simple... no rocket science here.


Here's the code behind:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Me.Load

Dim j As New jpegImage ' removed code for COTS & replaced
with psuedocode for posting purposes.
Dim c As New serviceConnector ' removed code for COTS & replaced
with psuedocode for posting purposes.
Dim urlImage

c = Server.CreateObject("Connector") ' removed code for COTS &
replaced with psuedocode for posting purposes.
c.ServerName = "DC1" ' Server's name
c.ServerPort = 5300 ' Server's port

j = Server.CreateObject("Jpeg") ' removed code for COTS &
replaced with psuedocode for posting purposes.
urlImage = j.GetImageAsUrl() ' string with path to newly
created jpeg file on server

Me.mapImageSrc_hidden.Value = urlImage

End Sub

Okay... you'll see that I'm using a hidden field in the page markup.
There's a bunch of reasons for this madness I'll skip for now but I
need the client to load the image... not the server. Here's what
happens next:

<asp:HiddenField ID="mapImageSrc_hidden" runat="server" />
<img id="mapImage" src="Images/null.gif" onload="getImage();" />

And in here's the getImage method:

function getImage()
{
var objHiddenImage =
document.getElementById("mapImageSrc_hidden");
var objMapImage = document.getElementById("mapImage");

objMapImage.src = objHiddenImage.value;
}

The problem is on the last line of the getImage method... when I put
the hidden field's value in the src property of the html image, the
page gets stuck in an infinte loop. It's as if the page never fully
loads, even though image generation is complete on the server, so the
onload=getImage() keeps getting fired over and over again.

Adding a "return" to the function doesn't help... nor does checking for
top.PostBackDone. Additionally I tried putting the call in
window.onload...

<head>
<script type="text/javascript">
function getMap()
{
if (arguments.callee.done) return;

arguments.callee.done = true;
var objHiddenImage =
document.getElementById("mapImageSrc_hidden");
var objMapImage = document.getElementById("mapImage");

objMapImage.src = objHiddenImage.value;
}
window.onload = getMap;
</script>
</head>

On objMapImage.src = objHiddenImage.value, I get the "null is null or
not an object" error and the image doesn't show... even though
debugging clearly shows a valid path string in objHiddenImage.value!!!

Any suggestions are greatly appreciated.

Thanks!
 
L

Lee

Adam Sandler said:
Okay... you'll see that I'm using a hidden field in the page markup.
There's a bunch of reasons for this madness I'll skip for now but I
need the client to load the image... not the server.
Click to expand...

The server never loads images.
They're always loaded by the client via a separate request back
to the server, so throw away all that nonsense and simply write
the URL of the image into the src attribute of the image.


--
 
A

Adam Sandler

The server never loads images.
Click to expand...

Your absolutely correct. And I didn't mean to imply otherwise.

However, the server creates the image at runtime. The client doesn't
have, nor will it ever have, knowledge of this runtime creation. So I
use the hidden field in ASP.NET as a container between the server side
and client side. The server side sends the url of the runtime image to
the hidden field and the client side traces the DOM to pull the value
out of the hidden field.
simply write the URL of the image into the src attribute of the image.
Click to expand...

okay... but what's the difference between authoring some document.write
staments or objMapImage.src = objHiddenImage.value???
 
L

Lee

Adam Sandler said:
Your absolutely correct. And I didn't mean to imply otherwise.

However, the server creates the image at runtime. The client doesn't
have, nor will it ever have, knowledge of this runtime creation. So I
use the hidden field in ASP.NET as a container between the server side
and client side. The server side sends the url of the runtime image to
the hidden field and the client side traces the DOM to pull the value
out of the hidden field.


okay... but what's the difference between authoring some document.write
staments or objMapImage.src = objHiddenImage.value???
Click to expand...

Besides the fact that one will work?


--
 
L

Lee

Adam Sandler said:
Your absolutely correct. And I didn't mean to imply otherwise.

However, the server creates the image at runtime. The client doesn't
have, nor will it ever have, knowledge of this runtime creation. So I
use the hidden field in ASP.NET as a container between the server side
and client side.
The server side sends the url of the runtime image to
the hidden field and the client side traces the DOM to pull the value
out of the hidden field.


okay... but what's the difference between authoring some document.write
staments or objMapImage.src = objHiddenImage.value???
Click to expand...

No, you don't need document.write statements. Write the URL of your
generated src into the HTML when you generate the page on the server.
That src won't be accessed by the server, only by the client.


--
 
V

VK

<img id="mapImage" src="Images/null.gif" onload="getImage();" />

And in here's the getImage method:

function getImage()
{
var objHiddenImage =
document.getElementById("mapImageSrc_hidden");
var objMapImage = document.getElementById("mapImage");

objMapImage.src = objHiddenImage.value;
}

The problem is on the last line of the getImage method... when I put
the hidden field's value in the src property of the html image, the
page gets stuck in an infinte loop.
Click to expand...

Of course it does. This is from the "Top 10 of dummy errors in
JavaScript" :)

Image loads and calls onload handler. Onload handler instructs to load
another image instead of the current one. New image loads and calls
onload handler. See the top... and so on...
With all <layers>, <iframes> and <img> put in onload loop this way
since 1997 one could make a mountain with its paramount in the
stratosphere, so don't be ashamed - you are not the first and most
definitely not the last. :)

out:
objMapImage.src = objHiddenImage.value;
Click to expand...

in:
if (objMapImage.src != objHiddenImage.value) {
objMapImage.src != objHiddenImage.value;
}

P.S. More sophisticated ways with removing event listener on first call
are also possible.
Whatever you are doing with image load sequence seems very strange -
but OK, it is your doing.
 
L

Lee

NO said:
Learn to use server-side scripting properly, whether it's PHP, ASP,
ColdFusion or whatever.

Your server-side script generates an image and puts it in a file on your
server, right?

In your source code for the web page, you'll have something like this:

<img src="_insert_file_name_here_">

where "_insert_file_name_here_" means that your scripting language
outputs the actual name of the file between the quotes.

Compare: If your image is static in a file named myImage.jpg, you'd have

<img src="myImage.jpg">
Click to expand...

Note that you responded to my post, and not to the person with
the problem.


--
 
L

Lee

NO said:
Yes, that's because I trimmed the quoted text. But my reply was intended
to enlighten the original poster, not you. No offense.
Click to expand...

No offense taken, but you risk having the OP ignore your post, because
it appears to be directed to me.


--
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

problem with providing an image src property 0
How do I fix this issue in sqaurespace code block? 1
Help with code 0
Load and display an image. 13
IE progress bar never stops incrementing... 3
Java client side gif loading problem 4
Only one table shows up with the information 2
Client side jscript issue 7

Members online

Total: 47 (members: 1, guests: 46)
Robots: 114

Forum statistics

Threads
473,969
Messages
2,570,161
Members
46,708
Latest member
SherleneF1

Latest Threads

Top