Alternative to: 'img onload='

[mayfair]

Hey Guys,

 

I've got a table that contains an undetermined number of rows that I wanted to apply some kind of 'loading' effect to. I was originally going to use innerHTML or something similar, but after reading about the lack support for it in certain browsers, I decided to try and write some simple JS that hides/unhides each row of the table as it loads. My JavaScript skills aren't great, but I managed to achieve the desired effect. Unfortunately, I used the onLoad function on images which I realise now is not compliant with a STRICT doctype, nor does it validate to AAA2 accessibility standards. I have tried searching for an alternative, but as yet have come up with nothing.

 

Let me explain a little bit more about how my code works:

 

Each row of the table contains an image in the first column. When this image loads, it calls a function that instantly sets the row visibility to hidden, effectively hiding the row before it even appears on the screen. Then after a small, random amount of time, I set the row visibility back to visible. I can post the code here if it would help, or you can see the table in action here:

 

www.compareholidaymoney.com

 

(the function called by onload is located in an external file referenced in the header: index-js.js)

 

What I would like to know is if there is an alternative to onload that I could use to achieve a similar effect that is compliant, and if not what the best way of achieving this effect would be.

 

Thanks in advance to anyone that might be able to help.

 

-mayfair

 

[Lautarox]

If understood what you are saying, jquery has a lot of effects to hide or show html elements, you can check jquery ui also.