Miva Merchant Modules and Development
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.

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