Browsers and onLoad

[Stuart]

I am very new to javaScript, and I am hoping someone can explain the
differance between the following two browsers and how to deal with thier
differant approach to firing the onLoad event.

The following web page is for my own use only, therefor I am uninterested in
the Netscape platform.

At home I have the following browser "Microsoft Internet Explorer4.0
(compatible; MSIE 5.0; Windows 98; DigExt)" and my web page loads as
planned. The onLoad event is fired when all the images are loaded, and until
they are fully loaded progreess can be followed on the status bar.

At work I have "Microsoft Internet Explorer4.0 (compatible; MSIE 6.0;
Windows 98)"... Now this performs very differantly, The onLoad event is
fired as soon as the HTML is loaded (which is a very long time before all
the images are loaded) Also, because the browser considers loading to be
complete, No progress on the images downloading is given on the status bar.


The following link is to the first page, this gives the link to the second
page that is causing the headache. If you do decide to view the page, choose
4 days at 24 hours!

http://www.stuartstuart.fsnet.co.uk/other/gfsindex.htm

As I am new to javaScript, I would welcome any advice / sugestions as to
writing style and improvements that I could make

regards
Suart

the following is the script :-

<Script>
var dwellTime=2
var pos=''
if (location.href.indexOf('?')!= -1){
qwert =location.href.slice(location.href.indexOf('?')+1)
var dy=qwert.slice(2)
var int=qwert.slice(0,2-qwert.length)
}
parent.window.moveTo(0,0)
parent.window.resizeTo(screen.availWidth,screen.availHeight)
if(screen.width==800){
var wth=632;var hgt=518
}else{
var wth=790;var hgt=648
}
var pics=(24/int)*dy
var img=new Array()
var hrs=''
for(var i=0;i<pics;i++){
hrs=i*int
if (hrs==0){hrs='00'}
img = new Image(wth,hgt)
img.src= 'http://129.13.102.67/wz/pics/Rtavn'+hrs+'1.gif'
}

function opener(){
document.images[0].src=img[0].src
pos=0
}

function fire(q){
if(q>0){pos++}else{pos--}
if (pos==-1){pos=img.length-1}
if (q==1&&pos==img.length){pos=0}
document.images[0].src=img[pos].src
}
function auto(b){
if (b){
pos++
if (pos==img.length){pos=0}
document.images[0].src=img[pos].src
timerID=setTimeout("auto(1)",dwellTime*1000)
}else{
clearTimeout(timerID)
return
}
}


function dwell(t){
if(t){
dwellTime=dwellTime+0.5
}else{
dwellTime=dwellTime-0.5
if (dwellTime<0){dwellTime=0}
}
}
</Script>

 

[Thomas 'PointedEars' Lahn]

At home I have the following browser "Microsoft Internet Explorer4.0
(compatible; MSIE 5.0; Windows 98; DigExt)" and my web page loads as
planned. The onLoad event is fired when all the images are loaded, and
until they are fully loaded progreess can be followed on the status bar.

At work I have "Microsoft Internet Explorer4.0 (compatible; MSIE 6.0;
Windows 98)"... Now this performs very differantly, The onLoad event is
fired as soon as the HTML is loaded (which is a very long time before all
the images are loaded) Also, because the browser considers loading to be
complete, No progress on the images downloading is given on the status
bar.

This is a known issue, a test case can be found at
http://www.netz-notizen.de/angedachtes_ausprobiertes/body_onload/b0.html

All you can do is to use the onload event for each img/Image element/object
and invoke a function that counts the number of images being already loaded.
If the number reaches document.images.length or a number you specify, you
invoke what should be executed onload of the document. Note that the
`onload' event handler is not specified for `img' elements in HTML but you
can assign it via the DOM in IE.

<Script>

The type attribute is missing for valid HTML 4:

var dwellTime=2

It is good style to end JavaScript statements with `;'.

var pos=''
if (location.href.indexOf('?')!= -1){
qwert =location.href.slice(location.href.indexOf('?')+1)
var dy=qwert.slice(2)
var int=qwert.slice(0,2-qwert.length)
}

Use `location.search' instead.

parent.window.moveTo(0,0)
parent.window.resizeTo(screen.availWidth,screen.availHeight)
if(screen.width==800){

Do not do this, the property values of the `screen' object are
unreliable and the window is best sized as the user wishes it.

Besides, so-called "optimization for screen resolution" is
neither required for good design nor recommended.

function opener(){
document.images[0].src=img[0].src
pos=0
}

This is unlikely to work. AFAIS in web browsers, functions are methods of
the global or top-leve-object, with is the `window' object. But this object
has a non-function property called `opener' that references the window that
has opened the current window with scripting. That property will be
overwritten here at best.


PointedEars

 

[Stuart]

This is a known issue, a test case can be found at
http://www.netz-notizen.de/angedachtes_ausprobiertes/body_onload/b0.html

its in a foreign language!

All you can do is to use the onload event for each img/Image element/object
and invoke a function that counts the number of images being already loaded.
If the number reaches document.images.length or a number you specify, you
invoke what should be executed onload of the document. Note that the
`onload' event handler is not specified for `img' elements in HTML but you
can assign it via the DOM in IE.

Looks interesting, will give it a go.......how does the image onload event
deal with images that are not availabe?

The type attribute is missing for valid HTML 4:
ok




It is good style to end JavaScript statements with `;'.
ok


Use `location.search' instead.

I spent ages working out how to extract the bit after the "?"...I was quite
pround of my effort until you point out the purpose defined function

Do not do this, the property values of the `screen' object are
unreliable and the window is best sized as the user wishes it.

Yes, I totally agree, however, as this page is for my own use only I decided
to add this auto sizeing....

Besides, so-called "optimization for screen resolution" is
neither required for good design nor recommended.

function opener(){
document.images[0].src=img[0].src
pos=0
}

This is unlikely to work. AFAIS in web browsers, functions are methods of
the global or top-leve-object, with is the `window' object. But this object
has a non-function property called `opener' that references the window that
has opened the current window with scripting. That property will be
overwritten here at best.

This was a bit of an accident, I did not realise "opener" was a javaScipt
function.....suprisingly it works fine!.....It was also a little unusual for
me to use a normal word as an object name, I normally misspell words for
object names and variables to avoid this sort of problems.

PointedEars

Many thanks for your views, I will use your advice!

 

[Thomas 'PointedEars' Lahn]

all

^^[1]

This is a known issue, a test case can be found at
http://www.netz-notizen.de/angedachtes_ausprobiertes/body_onload/b0.html

its in a foreign language!

Google is your friend. [psf 6.1]

Click the button and see what happens, especially
when you force reload from the server (Shift+Refresh).

All you can do is to use the onload event for each img/Image element/object

^^[1]

and invoke a function that counts the number of images being already loaded.

^^[1]

If the number reaches document.images.length or a number you specify, you
invoke what should be executed onload of the document. Note that the
`onload' event handler is not specified for `img' elements in HTML but you
can assign it via the DOM in IE.

Looks interesting, will give it a go.......how does the image onload event
deal with images that are not availabe?

Test it. I think the event will not fire then, but
you still have an Image object to reference to.

[location.href substring extraction]

Use `location.search' instead.

I spent ages working out how to extract the bit after the "?"...I was quite
pround of my effort until you point out the purpose defined function

JFTR: location.search is a non-function property.

Many thanks for your views, I will use your advice!

You are welcome. And please read

http://www.netmeister.org/news/learn2quote.html
http://home.in.tum.de/~jain/software/oe-quotefix/


PointedEars