Avatar of PLBS
PLBS asked on

Hiding DIVs using window.onload

I am about to build a page containing a complex custom JavaScript slideshow.  I have a couple critical questions before I begin:

1)  For very specific reasons, I want to put each photo in its own DIV container, and execute the slideshow by changing the "display" value of the DIVs.  To accommodate non-JavaScript-enabled visitors, I figured I would have the page load with all the DIVs displaying, then set display: none via JavaScript window.onload for all the DIVs except the first one in the slideshow.  So... as long as I have that "hiding" code executing first in the onload event, will the DIVs that are going to be hidden start off briefly visible JavaScript enabled users?  In other words, there won't be a brief flicker of all the DIVs showing before they're hidden, right?  I always assumed the onload event executed after the page was loaded into memory but before it was rendered on the screen.  Would it be better to put a script tag inline after each DIV that will set display: none, or is using the onload event a better way?

2)  I'm going to use neondragon's reflection script to place a reflection below each photo (that is the reason I'm resorting to rotating images via DIV visibility rather than img src.)  That script works great, but it takes a second or so to calculate and render the reflection of an image.  I'm assuming that, even though all but one DIV will be hidden, if I execute the reflection script on the hidden images it will still create the reflection so that, when the DIV is made visible, the reflection will already be created.  Is this correct?  The reflection script executes onload and builds a reflection for every image with class="reflect" so I assume it will still build the reflection even within an "invisible" DIV.  Am I right about this?


Avatar of undefined
Last Comment
David S.

8/22/2022 - Mon
David S.

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question

1) Wow, thanks.  Yuk, but thanks.  That's very valuable.  As for the "other" option... using an inline script tag immediately below the DIVs I want to hide, which calls the "hide the divs" function in the header... I've used that technique before, and it seems to have worked, but I consistently hear "inline scripting is bad."  But I haven't found a concise explanation of WHY it's bad.  Do you have a link to a good explanation of the evils of inline scripting?

2)  I do know of one issue with using display: none, which is the browser inconsistencies when it comes to making them visible again.  Are there other issues around display:none?
David S.

1) Putting one <script> element after the <div>s would be an acceptable solution. Some of us prefer to keep all <script> elements in the <head> though.

It comes down to the principal of the separation of content/structure from presentation (e.g. CSS) and behavior (e.g. JavaScript).

2) None come to mind.
Your help has saved me hundreds of hours of internet surfing.