Delay counter

[JellyON]

Hi. Is there a way to delay a call to a page counter (ie. call to a
server script from an IMG tag) for the purpose to not lock the page
loading awaiting counter be displayed.

Maybe a setTimeout() launching an equivalent of "document.write ", but
writing in a specific DIV ? Thanks in advance for your ideas.

Actually, the counter is called (without delay) like this :

<div id="count" style="position : absolute; visibility: visible; top:
20px; left: 20px; width: auto; height: auto; z-index: 5; cursor:
default"><img src="http://host.com/cgi-bin/counter.exe?col or=red&font=
6"></div>

[VK]

JellyON wrote:

Hi. Is there a way to delay a call to a page counter (ie. call to a
server script from an IMG tag) for the purpose to not lock the page
loading awaiting counter be displayed.

Maybe a setTimeout() launching an equivalent of "document.write ", but
writing in a specific DIV ? Thanks in advance for your ideas.

Actually, the counter is called (without delay) like this :

<div id="count" style="position : absolute; visibility: visible; top:
20px; left: 20px; width: auto; height: auto; z-index: 5; cursor:
default"><img src="http://host.com/cgi-bin/counter.exe?col or=red&font=
6"></div>

Rendering delay happens not because of a server call by itself - but
because the engine cannot allocate the image until the image header
(with width and height) is received. As a result it cannot allocate
(render) the whole <div>.

If say it's a 128x32 image then this would solve the problem:
<div id="count" style="position : absolute; visibility: visible; top:
20px; left: 20px; width: auto; height: auto; z-index: 5; cursor:
default"><img src="http://host.com/cgi-bin/counter.exe?col or=red&font=
6" width="128" height="32"></div>

If you server script is *very* slow (so user will see a red crossed
"missing image" sign for a while), you can fix the situation by:

<div id="count" style="position : absolute; visibility: visible; top:
20px; left: 20px; width: auto; height: auto; z-index: 5; cursor:
default"><img src="TempTransp arent.gif" width="128" height="32"
onload="
if (this.src='Temp Transparent.gif ') {
this.src='http://host.com/cgi-bin/counter.exe?col or=red&font= 6';
}"></div>

[VK]

! Nasty typo !
Read:
if (this.src=='Tem pTransparent.gi f') {
this.src='http://host.com/cgi-bin/counter.exe?col or=red&font= 6';
}">

[JellyON]

In article <11************ **********@g14g 2000cwa.googleg roups.com>,
sc**********@ya hoo.com says...

! Nasty typo !
Read:
if (this.src=='Tem pTransparent.gi f') {
this.src='http://host.com/cgi-bin/counter.exe?col or=red&font= 6';
}">

Thanks a lot VK. I will try your piece of code asap.

[JellyON]

In article <11************ **********@g14g 2000cwa.googleg roups.com>,
sc**********@ya hoo.com says...

! Nasty typo !
Read:
if (this.src=='Tem pTransparent.gi f') {
this.src='http://host.com/cgi-bin/counter.exe?col or=red&font= 6';
}">

Well, it sounds right :-) I've just replaced the if by a

setTimeout(func tion(){this.src ='http://host.com/cgi-bin/counter.exe?
color=red&font= 6';});

because it's better for delaying counter call and I didn't seen the
reason why for testing "TempTransparen t.gif" presence (obviously always
here). Maybe something I've missed ?

Well, now, it stay just a thing : I would like to display another DIV
(which contain a text like "Number of hits : ") only if counter call
succeeded. The question is not to know how to show the DIV (simply
change the visibility style attribute), but what to test. That is the
question !

[VK]

JellyON wrote:

Well, it sounds right :-) I've just replaced the if by a

setTimeout(func tion(){this.src ='http://host.com/cgi-bin/counter.exe?
color=red&font= 6';});

because it's better for delaying counter call and I didn't seen the
reason why for testing "TempTransparen t.gif" presence (obviously always
here). Maybe something I've missed ?
I did not mean to test for "TempTransparen t.gif". The idea was to have
TempTransparent .gif loaded right away so user does not see empty image
frame. And right upon the TempTransparent .gif load you request the
counter picture so it appears on the page when ready. setTimeout is an
option but why make things more difficult as they should be? ;-)
Well, now, it stay just a thing : I would like to display another DIV
(which contain a text like "Number of hits : ") only if counter call
succeeded. The question is not to know how to show the DIV (simply
change the visibility style attribute), but what to test. That is the
question !

Error event supported by images since Netscape 3 - what else?

The combined code could be:
....
<img name="myCounter " src="myTranspar ent.gif" width="128" height="32"

onload="
if (this.src == 'myTransparent. gif') {
this.src='http://host.com/cgi-bin/counter.exe?col or=red&font=6';
this.failedToLo ad=false;
}
else {
document.getEle mentById('myDiv ').style.visibi lity = 'visible';
}"

onerror="
this.src='myOop s.gif';
this.failedToLo ad=true;"
/>
....

As you cannot predict when exactly the counter will arrive, you better
let counter itself to make your <DIV> to appear, not vice versa.

To check the situation *later* (is counter loaded? is div displayed?)
you can always check the custom property failedToLoad:
if (document.image s['myCounter'].failedToLoad) {
// I got some problems
}

Unlikely in your case, but be careful with animated gif's: they produce
new "load" event on each animation cicle (a very old GIF98a bug which
will never be fixed now).

Also make sure that at least 'myOops.gif' is always available,
otherwise you'll put your script into onerror loop. It also can be
fixed programmaticall y, but easier and better simply to have this image
on your server.

[JellyON]

In article <11************ *********@z14g2 000cwz.googlegr oups.com>,
sc**********@ya hoo.com says...

onload="
if (this.src == 'myTransparent. gif') {
this.src='http://host.com/cgi-bin/counter.exe?col or=red&font=6';
this.failedToLo ad=false;
}

OK, it works unless the "if (this.src == 'myTransparent. gif')" because
the myTransparent.g if image has not always time to load before the
onload event. Not sure about this diagnostic, but has to be tried less
tired (me). Good night !

[Randy Webb]

JellyON said the following on 11/6/2005 5:34 AM:

Hi. Is there a way to delay a call to a page counter (ie. call to a
server script from an IMG tag) for the purpose to not lock the page
loading awaiting counter be displayed.
Display a transparent image temporarily. Use the window.onload (or body
onload) to trigger a function that will change the images src attribute
accordingly.
Maybe a setTimeout() launching an equivalent of "document.write ", but
writing in a specific DIV ? Thanks in advance for your ideas.

Actually, the counter is called (without delay) like this :

<div id="count" style="position : absolute; visibility: visible; top:
20px; left: 20px; width: auto; height: auto; z-index: 5; cursor:
default"><img src="http://host.com/cgi-bin/counter.exe?col or=red&font=
6"></div>

<img src="http://yourDomain.com/transparent.gif " name="counterIm age"
width="##" height="##">

along with this script:

function changeCounterIm age(){
document.images['counterImage'].src="http://host.com/cgi-bin/counter.exe?col or=red&font=6";
}

window.onload = changeCounterIm age;

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/