Android Question WebView with CSS

[b4xscripter]

Hi,
first of all, maybe this question is duplicated but I didn't find a clear response.
I use for my project the WebView library that works fine. But, sometimes, I have problems related to the styles. When I load a page the page is losing for 1-2 seconds the style (CSS) that, passed this time, is shown correctly. Please find attached images: the left one is shown in the first 1-2 seconds. The second one is shown passed 1-2 seconds.
I know that the problem is probably related to the fact that first the web is loeaded completely and after the styles are applied. But maybe someone has a trick to load the page in a different manner?
Thanks in advance!

 

[eps]

I think it's more dependent on your HTML that you use... Any chance of posting some of that?

 

[nwhitfield]

Are the styles loaded from the HTML using a link rel tag?

Assuming you have control over the web pages, you could try putting them in line in the HTML file, so that the browser reads them, before it gets to the page layout.

I'm suggesting that because my suspicion is that they're loaded in the usual way, with a line in the page header that's something like

<link href="/layout/fonts.css" rel="stylesheet" type="text/css">

and that when the WebView sees that, it carries on rendering the page, while firing off an asynchronous request to fetch the stylesheet. When that arrives, it applies it to the page.

Try instead putting the contents of your CSS file inline using style tags, and see if that makes a difference.

 

[Erel]

Where does the html come from? Are the CSS files local?

 

[b4xscripter]

Hi, Erel,

My CSS files are in my server, not in local. Is it possible to use CSS in local for webview?

Regards

 

[Erel]

This is the problem. The html loads quickly and it takes time for the CSS to be downloaded.

Is it possible to use CSS in local for webview?

Yes. Put the CSS files in the same folder you put the html file.

Load the html file with WebView.LoadURL. Build the url with the code I posted here: https://www.b4x.com/android/forum/t...es-in-the-assets-directory.69996/#post-444559

 

[b4xscripter]

Thank you a lot, Erel! Good solution!
Best regards