Prevent images from displaying while loading with AnythingSlider

AnythingSlider is just another jQuery slider effect, except we can embed any content as it uses a semantic unordered list HTML (5) structure.

My recent client wanted a mixture of HTML, videos and images, which means you get the nasty flash of the UL elements whilst your browser renders the window. Apparently its called Flash Of Unstyled Content (or FOUC). Whatever. Its called really annoying to me. So here is a bit of code that should be included in the default anythingslider.css but isn’t for some reason.

Find the #slider reference in your anythingslider.css or wherever the CSS is.

Add in;

[codesyntax lang=”css”]
overflow-y: auto;
overflow-x: hidden

 

Done!

Author: Kieran Barnes

Kieran is a PHP developer with 15 years commercial experience. Specialist in WordPress, CakePHP, CubeCart and all things PHP.

5 thoughts on “Prevent images from displaying while loading with AnythingSlider”

  1. Wanted to thank you for this solution. I read through so many other fouc articles that didn’t help. This has helped me on more than one website.

Leave a Reply

Your email address will not be published. Required fields are marked *