Sunday 1 April 2018

Avoiding Flickering in jQuery

Why Flickering occurs :

A flash of unstyled content is an instance where a web page appears briefly with the browser's default styles prior to loading an external CSS stylesheet, due to the web browser engine rendering the page before all information is retrieved. The page corrects itself as soon as the style rules are loaded and applied; however, the shift may be distracting.  

Solution to handle - properly styled :

 <div id="some-div" style="display:none">... content ... </div>. 

Then use jQuery to show it when the entire document is ready:

$(function() {
 $("#some-div").show();
 });

No comments:

Post a Comment