How to make loading of HTML content with bxSlider smoother
My site is live at http://donoriolo.com/, and I have bxSlider with HTML content on the front page.
My problem is, there's a second (or worse on slower connections than mine, I'm sure,) where the content is completely unstyled and takes up the entire window, like so:
Even after everything is loaded, leaving the page and coming back it happens for a split second.
I tried sticking my JS in the head instead of at the end of the body, but no luck. Any other ideas? ...Or would it just be better to say forget it and just use images for the slider?
Without knowledge of your setup I can't really know for sure. But my guess is that you use JavaScript to initialize the slider in http://donoriolo.com/js/script.min.js.
Because this script is being loaded after your content (DOM), it will look unstyled for the time being.
How to solve this?
Well, the simplest way is to just load the script before the content. This can be done by moving your script tag to the <head> in stead of the end of the <body>. By script tag I mean ofcourse:
<script src='/js/script.min.js' charset="utf-8"></script>
This brings the following problem, your website will not be displayed until the script loads. That may not really be a big problem, but visitors with slow connections (including a lot of mobile visitors) will notice a slow page load. Also this is problematic regarding to SEO.
What I would do, is hide the slider:
...
<div class="bxslider" style="display: none">...</div>
...
And show it again after the script runs, so somewhere in the end of script.min.js you would have:
$('.bxslider').show();
You might want to extend this with some fancy animations, for example using the opacity instead of display property.