CSS: Stop Flash of Unstyled Content With JQUERY

Miva Knowledge Base
Want to start an online store? We work with you from start to finish, from commerce platform to design to SEO.
Experience counts, and we have a lot.
Important Notice: This information is for internal reference only. Use at your own risk.

CSS: Stop Flash of Unstyled Content With JQUERY

Scot Ranney • February 22, 2024


If unstyled content flashes up before eveything in the page settles down, try this.

Case: A slider that briefly shows all slides before working.

Container: The container for the slide container should be what the size of the slides will be once rendering is complete so we don't get page shift.

<div style="height: 200px; width: 500px;">
	<div class="slider" style="display: none;">...</div>
</div>

Jquery: After we show the element then we call the script (in this case bxslider) with it's settings and such.

<script>
$(document).ready(function(){
	  $('.slider').show().bxSlider({
		slideWidth: 160,
		minSlides: 2,
		maxSlides: 5,
		preloadImages: 'all'
	  });
});
</script>

https://www.scotsscripts.com/mvblog/css-stop-flash-of-unstyled-content-with-jquery.html

mvkb_css mvkb_jquery