0

I am applying css stylesheet to some wiki pages in SharePoint. My problem is that sometimes, the content of the page is shown without any format and about after one second, the css is downloaded and applied.

I would like to avoid this problem by pre-loading the css, before rendering the HTML content. A temporary "Loading content..." image would do it as well. Is there any way to do it?

I am using a content editor linking the txt file with the css code for this purpose (I cannot add the code in all pages in order to be easier to maintain either).

Thanks in advance.

Improve this question
3
  • hmmm do you have the css link in top of the html? if so,it is a really odd result, you can always say body{display:none;} and with jQuery make the body display block if when the DOM is loaded.. Commented Oct 21, 2013 at 8:04
  • Or you can include all CSS inline into head section, so it will load synchronously before body, BUT this will slow down page loads, because CSS will not be cached and will not be loaded in parellel. Commented Oct 21, 2013 at 8:09
  • jycr753 I cannot add a link in top of the html, security restrictions remove all the links. This is why I use a content editor linked to the file. However, it seems that the content editor loads the content after the HTML is rendered. This is not viewable generally, but sometimes this css download takes a bit longer and you can see the unformatted text. mas.morozov, I have no head section, I am editing the content in the wiki pages. Thanks both of you for your comments Commented Oct 21, 2013 at 8:15

2 Answers 2

Reset to default
1

You can use loader-div with inline-style. Exemple:

<div style="position:absolute; top:0; left:0; width:100%; height:100%; background:#fff">

This block will hide content. Then you must hide this div with JS function on page load event.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I understand the idea, and I think it's just perfect. However, I cannot manage to hide the div, even though other code in my javascript is being executed. I applied the loaddiv id to the div. I am adding: var hideloaddiv = document.getElementById("loaddiv"); hideloaddiv.display = 'none';
Why you cannot? You don't have access to js-file? Or you can't wrote this function? I can give to you JS code for this idea. Do you use jQuery on your web-site?
I think I am using the correct js code, but for some reason the div does not disappear. It stays there after the page loads. Can you provide your code please?
It's Ok, I corrected it. It will work like this: var hideloaddiv = document.getElementById("loaddiv"); hideloaddiv.style.display = "none";
So this would solve the problem, as we could use the div to show a "Loading" text or image. Thank you all.
1

I went through this with a client on a slow webhost and actually found they were better off compressing/concatenating the css and making sure the images were suitable sizes. Something like CSSTidy works well.

Improve this answer

1 Comment

Thanks Jason, it is a great program, and I am sure that it will help a lot. However, in this situation I am importing a 2kb style file, so I really don't think that it is going to do any difference at all. It is not a matter of downloading time. Thank you again.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.