Replace Office365/SharePoint text in suitebar to company name with jQuery causes flicker

Question

I have a script on a page in sharepoint where I want to change the text from Sharepoint to my Company Name. It works but when the page refreshes the text sharepoint is visible for 1 second before the text changes. This is my code.

jQuery( document ).ready(function() {
jQuery(".o365cs-nav-appTitle > span").text("My Company Name"); 
});

Is the executionorder of scripts causing this?

Answer 1

Why use JavaScript at all?

    span.o365cs-nav-brandingText::after {
       content: " - Company Name";
    }

On some of my Tenants this looks like:

There are 2 SPANs with the same class

You can hide them with:

span.o365cs-nav-brandingText {
  color: transparent;
}

Then overlay the two ::after elements on top of each other:

span.o365cs-nav-brandingText::after {
 content: "Company Name";
 color: white;
 position: relative;
 left: -18em;
}

If you want to target the individual titles you can use the nth-child selector : http://www.w3schools.com/cssref/sel_nth-child.asp

Answer 2

Put in this CSS

.o365cs-nav-appTitle > span{
    transition:opacity 0.7s;
    opacity: 0;
}

and change your JS to

jQuery( document ).ready(function() {
   var $title = jQuery(".o365cs-nav-appTitle > span");
   $title.text("My Company Name"); 
   $tile.css('opacity', 1);
});

You see - every page has a Lifecycle. Right now you attach to the ready event of the document. At this event the browser already renderd the UI. If you do your alterations now you get a behaviour very similar to the FouC. To prevent that you can mostly do 2 things (but I recommend the first):

1. Hide things via CSS (all CSS is applied when the browser renders) and later blend them in smoothly via JS
2. It gets less likely you get the effect if you attach earlier but when doing changes via JS this isn't really a sturdy solution.

You should also evaluate if you have to to DOM manipulation at all - have a look at this answer.