Ajax Delay and Flicker

[Mike]

Hello,
I have a simple Table, 1 Row 2 Cells . The first cell has the Menu.
The second could have anything.
I update the 2nd Cell with the code below.
The problem is that the table elongates up and down for a split second
before the image is displayed in the cell.
I was able to slow it down by running a bandwidth intense program in
the background and I saw it elongate(The table border stretched also)
It happens DURING "document.getElementById
("Content").innerHTML=newTD;" , not before
The Cell I'm updating is id "Content". Do I need a div???

xmlResponse = xmlHttp.responseXML;
// obtain the document element (the root element) of the XML
structure
xmlDocumentElement = xmlResponse.documentElement;
imageName = xmlDocumentElement.firstChild.data;

newTD="<img src='"+imageName+"' width='650px' id='Graph' />"

document.getElementById("Content").innerHTML=newTD;

Any Help
Thanks
Mike

 

[Thomas Allen]

Hello,
I have a simple Table, 1 Row 2 Cells . The first cell has the Menu.
The second could have anything.
I update the 2nd Cell with the code below.
The problem is that the table elongates up and down for a split second
before the image is displayed in the cell.
I was able to slow it down by running a bandwidth intense program in
the background and I saw it elongate(The table border stretched also)
It happens DURING "document.getElementById
("Content").innerHTML=newTD;" ,  not before
The Cell I'm updating is id "Content". Do I need a div???

      xmlResponse = xmlHttp.responseXML;
      // obtain the document element (the root element) of the XML
structure
      xmlDocumentElement = xmlResponse.documentElement;
      imageName = xmlDocumentElement.firstChild.data;

      newTD="<img src='"+imageName+"' width='650px'  id='Graph' />"

      document.getElementById("Content").innerHTML=newTD;

Any Help
Thanks
Mike

It sounds to me like something you frequently see on loading pages
with images. Images by default have a height and width of zero (and
inline display), so you probably can avoid the problem by specifying a
height for the image.

Thomas

 

[Zvt.Fred]

Hello,
I have a simple Table, 1 Row 2 Cells . The first cell has the Menu.
The second could have anything.
I update the 2nd Cell with the code below.
The problem is that the table elongates up and down for a split second
before the image is displayed in the cell.
I was able to slow it down by running a bandwidth intense program in
the background and I saw it elongate(The table border stretched also)
It happens DURING "document.getElementById
("Content").innerHTML=newTD;" ,  not before
The Cell I'm updating is id "Content". Do I need a div???

      xmlResponse = xmlHttp.responseXML;
      // obtain the document element (the root element) of the XML
structure
      xmlDocumentElement = xmlResponse.documentElement;
      imageName = xmlDocumentElement.firstChild.data;

      newTD="<img src='"+imageName+"' width='650px'  id='Graph' />"

      document.getElementById("Content").innerHTML=newTD;

Any Help
Thanks
Mike

Did you try load your image in memory before add it to the dom?

Fred.

 

[David Mark]

It sounds to me like something you frequently see on loading pages
with images. Images by default have a height and width of zero (and
inline display), so you probably can avoid the problem by specifying a
height for the image.

And a valid width.

 

[Thomas Allen]

And a valid width.

What's invalid about it? While that's the wrong way to set image
dimensions, it will pass XHTML 1.0 Strict.

Thomas

 

[David Mark]

What's invalid about it? While that's the wrong way to set image
dimensions, it will pass XHTML 1.0 Strict.

The phrase "pass XHTML 1.0 Strict" has no meaning. If you are going
to nit-pick, you will need to understand what you are talking about.

I didn't say it was invalid markup. The value of the width attribute
is simply not appropriate.

 

[Thomas Allen]

If you are going to nit-pick, you will need to understand what you are talking about.

Er, you're the one picking nits here.

I didn't say it was invalid markup.  The value of the width attribute
is simply not appropriate.

So it passes validation and works in all browsers. How is the value
not appropriate?

Thomas

 

[David Mark]

Er, you're the one picking nits here.

How so? Pixel units in a width attribute seems sane to you?

So it passes validation and works in all browsers. How is the value
not appropriate?

You don't know what validation means and it is foolish to make
statements about "all browsers."

 

[AMP]

Er, you're the one picking nits here.


So it passes validation and works in all browsers. How is the value
not appropriate?

Thomas

How do I load it into memory before adding it to the DOM?
Also I created a another test page that had no initial content in the
TD , but it still did this stretching thing when I run my AJaX.
AND it does it in FF and IE
Thanks
Mike

 

[Thomas Allen]

How so?  Pixel units in a width attribute seems sane to you?

Like I said, it's the wrong way, but the code itself is valid.
Clearly, the correct way to set dimensions of any element is via CSS.

You don't know what validation means and it is foolish to make
statements about "all browsers."

See, you're going to offend people all the time by stating things that
way. It's not that I don't know what it means, rather, we have
different definitions of "validation." Valid HTML to me is code that
will pass the W3C validator against its DTD, and I'll never know your
definition if you only, correctly, suggest my ignorance of the
workings of your mind.

Thomas

 

[Thomas Allen]

How do I load it into memory before adding it to the DOM?
Also I created a another test page that had no initial content in the
TD , but it still did this stretching thing when I run my AJaX.
AND it does it in FF and IE

Did you try setting the height? I'd expect that to work.

As far as pre-loading goes, you can do that by assigning the image to
the "src" property of an image object:

var imgLoader = new Image();
imgLoader.src = 'path/to/image.png';

I don't know if this is the best way, as it's been a long time since I
used JS for my rollovers, which is the only time I've used this
technique.

Thomas

 

[David Mark]

Like I said, it's the wrong way, but the code itself is valid.
Clearly, the correct way to set dimensions of any element is via CSS.

Oh, howls of derision.

See, you're going to offend people all the time by stating things that
way.

I was talking to you. I don't refer to "all browsers" much.

[snip]

 

[Thomas Allen]

I was talking to you.  I don't refer to "all browsers" much.

I forgot, you like to quote people out of context (anyone with a head
on their shoulders knows that my comment was referring to expressions
of yours such as "You don't know what validation means"). So much for
reasonable discussion, I was being optimistic, carry on.

Thomas

 

[David Mark]

I forgot, you like to quote people out of context (anyone with a head

I quoted your entire post, genius (sans signature.)

on their shoulders knows that my comment was referring to expressions
of yours such as "You don't know what validation means"). So much for
reasonable discussion, I was being optimistic, carry on.

You *don't* know what validation means. You don't know HTML, CSS or
Javascript. You are basically a mouthy prat.

 

[AMP]

I quoted your entire post, genius (sans signature.)


You *don't* know what validation means.  You don't know HTML, CSS or
Javascript.  You are basically a mouthy prat.

Setting the height worked.
On another note:
I subscribe to many forums, Motorcycles,Guitar Playing....
I've never seen more infighting than right here. There were 13 replies
and 1/2 were just bashing each others skills.
Thanks
Mike

 

[Thomas Allen]

Setting the height worked.
On another note:
I subscribe to many forums, Motorcycles,Guitar Playing....
I've never seen more infighting than right here. There were 13 replies
and 1/2 were just bashing each others skills.

The group is not moderated, so you get some pretty aggressive behavior
at times. Some people have personal agendas too (David Mark seems to
be out to prove my incompetence, and this will likely be followed by a
message from him saying "it's been proven!" or something along those
lines).

Happy to hear that the simple fix worked, and please don't shy away
from asking for more help here.

Thomas

 

[David Mark]

Setting the height worked.
So?

On another note:
I subscribe to many forums, Motorcycles,Guitar Playing....
Again.

I've never seen more infighting than right here. There were 13 replies
and 1/2 were just bashing each others skills.

Infighting? A rogue newbie tried to confuse a simple issue. Happens
all the time (we get a lot of nuts in here.)

 

[Thomas Allen]

Infighting?  A rogue newbie tried to confuse a simple issue.  Happens
all the time (we get a lot of nuts in here.)

You must've missed the part where I solved his problem. It was in the
first reply. If helping people without insulting their pre-existing
knowledge is "rogue," than consider me as such.

Thomas

 

[David Mark]

You must've missed the part where I solved his problem. It was in the
first reply. If helping people without insulting their pre-existing
knowledge is "rogue," than consider me as such.

You tried to confuse the secondary issue. Are you really this thick?

 

[Timo Reitz]

Like I said, it's the wrong way, but the code itself is valid. Clearly,
the correct way to set dimensions of any element is via CSS.

The value of the width and height attributes of img elements are either a
percentage (like "50%") or they are an integer representing the number of
pixels (like "250").

So this should be an image with a width of 250 pixels and a height of 100
pixels:

<img src="nothing.gif" alt="" width="250" height="100">

In this example, width and height should just be ignored:

<img src="nothing.gif" alt="" width="250px" height="100px">