0

I've been working with some basic animations lately and trying to follow good web practices at the same time. The problem I'm encountering is image flicker when not using a preset css method to hide the element before the page loads.

It's very easy to prevent the flicker by just hiding the element with my normal css and then revealing it with javascript, but that seems to me a horrible practice if someone has javascript disabled.

Should I use the HTML5 feature of putting <noscript> tags in the header and then use a separate style sheet to set the opacity and position to the final settings for users without javascript? Is that the most elegant solution?

I've started using the greensock (gsap) library to TweenLite.from, since I can just set everything to the final state in the css, but I get a slight image/text flicker the first time the page is loaded. I like this solution because I can set all of the css as it will be for someone with no javascript, and it allows me to easily animate from a point, to an existing point, instead of working backwards like I have to do with Javascript or jQuery. But, there's still that image flicker which isn't really acceptable. Would a page preloader solve this?

What is the generally agreed upon practice for this these days? I'm also worried about SEO and the consequences of setting stuff to visibility: hidden or display:none and then animating it in. Does the Google spider read javascript?

Here's an example of the screen flicker and animations I'm talking about.

Longblog
  • 821
  • 2
  • 11
  • 19
  • 2
    _“but that seems to me a horrible practice if someone has javascript disabled”_ – that is usually done by adding a class to the `html` element via a script that is embedded directly as first element into `head` – inline script, not external, `document.documentElement.className = 'hasJS'` or something – and then use that class to specify formattings that should only be applied if JS is available, `html.hasJS .foo { display:none; }` – CBroe Jul 24 '14 at 11:02
  • And that class gets added fast enough to prevent the flicker? – Longblog Jul 24 '14 at 21:50

1 Answers1

0

Have a look at HTML5 Boilerplate and Modernizr.

It ships with a smart solution to see if a client has JavaScript enabled in CSS.

By default a class no-js is applied to HTML tag and it is then replaced by js by Modernizr. That way you can qualify your CSS selectors accordingly.

Example CSS:

.no-js .foo {  }
.js .foo {  }

This should execute fast enough that clients with enabled JavaScript don't see the no-js styles.

References:

Community
  • 1
  • 1
mlnmln
  • 575
  • 2
  • 10
  • That sounds like the perfect solution. I wonder if adding an entire library to solve one problem is a bit overkill though. Edit: Looks like CBroe's comment to the original question explains how to do exactly what you're suggesting without the need for an external library. – Longblog Jul 24 '14 at 21:49
  • 1
    Well, you asked "What is the generally agreed upon practice for this these days?". HTML5 Boilerplate is the de-facto standard for a lot of the industries' best practices. you can roll your own, customized modernizr if you want to include only your particular feature set. If that doesn't fit your needs, feel free to use the solution of @CBroe which is essentially the same. Regarding page flicker: it is imperative that you add the script tag in the head, so that it blocks page rendering while executing. – mlnmln Jul 25 '14 at 10:42
  • OK great, thanks. I would have probably spent awhile debugging before I figured out it needed to be in the head. :) – Longblog Jul 25 '14 at 22:15