加载页面后淡入内容

Question

What's the best way to do this, and how do you make it browser-proof? For example, this post establishes that best practice is to cover your content with an opaque div and fade that out after load. But what if the client has javascript disabled? PHP detection of JS isn't reliable, and if one were to go with the opaque div method you would never see the content in a JS-disabled browser.

Ideas?

Answer 1

You can set default of the overlay element to display: none in css and use document.write to insert a style tag in head (after main css) that sets it to display:block. If js disabled will never be seen since the write will be ignored.

Another way is to use script in your head to add a class to html tag such as js_enabled , make css rule like

.overlay { display:none}
.js_enabled .overlay { display:block}