WKWebView shows white screen for a long time after start request - ios

I'm using WKWebView to load a local html file using
[self.webView loadFileURL:tmpUrl allowingReadAccessToURL:directoryUrl];
Currently the webView will keep white screen for a long time, and once it shows content, all images were already downloaded.
It looks like the WKWebView will only render after all images downloaded.
Sample HTML content is here: https://pastebin.com/681btcSa
Then I did some test for pages without images. It seems that when loading complex HTML, WKWebView always takes a long time before render anything on screen.
I tried to call _updateVisibleContentRects and setNeedsLayout, but it helps little.

Related

Why does React Native webview fails to load images when opened second time?

I am rendering remote images inside a webview in react native ios.
The image tag looks like this
<img src="https://example.in/1222asdasdas.png" alt="bug-tracking-tips-01">
The webview loads the images from the remote url and everything works fine the first time I load the webview.
But the next time I open the webview the image does not appear and when I inspect in safari, this error is shown An error occured trying to load the resource.
An interesting thing however is that if I have multiple instances of webview, each webview loads images for the first time and fails in the successive trials.
How can this be solved?

Can loadHTMLString load image asynchronously?

I have a local template and generate a complete html string by inserting result of a web API call into the template. The html string has some links to external images.
I'm showing the string in a UIWebView by calling its loadHTMLString method as below ...
self.newsBodyWebView.loadHTMLString(unifiedDoc, baseURL: nil)
I'm not quite clear about loadHTMLString's behavior, it appears that it's rendering contents synchronously, like even if I'm sure that the text part has already returned, the UIWebView won't show any content (I'm seeing a blank white view) until the external images are downloaded completely.
Could you please suggest what I can do in this scenario? I'm thinking if I should put different sections of text and images into different UITableViewCell to separate their display, this does not seem like a tidy solution though.

display url in WKWebView when partially loaded

I have recently started working with WKWebViews. When loading a url the WKWebView appears to wait for all javascript to complete before it shows any of the page. Is there a way to allow the WKWebView to load content progressively like it does in a UIWebView. Thanks

How to avoid a blink when UIWebView loads HTML

I have a native iOS app that contains a tab bar. The view controller for each tab contains a UIWebView. When the user switches between tabs, I load the HTML in the corresponding web view. The HTML is fully cached on a device. Here is how I feed the HTML to UIWebView:
[self.webView loadHTMLString:htmlString baseURL:baseUrl];
baseUrl is a file URL pointing to a directory where all assets are located.
This works great in online and offline modes, however it takes time for the UIWebView to parse and render the HTML. As a result, the user sees a brief blink of a white background when switching between tabs. I'd like to remove it, because the user is able to tell that the UI is not native (native UI renders instantly).
I was thinking about taking a screenshot of the UIWebView once it's done rendering the HTML and caching it in memory. The next time the user navigates to that web view, the app displays the screenshot while the UIWebView is rendering the HTML in the background. Finally, the app swaps the screen shot with the actual UIWebView and takes a new screenshot. This is similar to how Google Chrome app works.
Does anyone know a better solution to this problem?
Depends on how you present that web view. I'm not really sure from your description how you do it, but since you're talking about a blink of white background, I'm going to assume there is a situation where you have a web view with a loaded html and then you switch it to another html. The solution for that case would be:
create a second web view,
load the new html to this new web view,
when that web view finishes loading html (you can find out if you use UIWebViewDelegate) you can then quickly switch it with your old web view (meaning you finally add the new web view to the view hierarchy at THIS point, not when you created it).
This way you'll have an instant switch between old and new html, however user will be left waiting and it is your decision what to do with it. You could use UIActivityIndicatorView for example.
When webViewDidFinishLoad: gets called you can do any number of things, make the webview visible, remove something that you had on top of the webview etc...

UIWebView loading but not displaying content

UIWebView successfully loaded content, but is not displaying it. UIWebView is just white screen. BUT, if you click on this UIWebView it will process your click. For example, if you click at place where the link should be (but in fact the white space), the click processed and next page loaded and displayed OK.
The bug is unstable. I got it only with local HTML file (our homepage, it generated locally), web content loads OK. It happens in 20% cases. But in the same time, it is very sticky. Once got white screen, you can reload this page many times and see white screen (but if you click on invisible link, another page displayed successfully). Sometimes it occasionally appears without any reason. Your can "scroll" this blank screen up and down and it occasionally loaded. This local HTML has a lot of stuff, embedded images, javascripts, etc, and it could be javascript problem, but I can't explain how it can be, that content invisible, but still clickable.
It happens in iPod real device and iPhone simulator 4.3, but can't reproduce it on iPad or iPad simulator.
I spent a whole day trying resolve this. Any ideas?
I solved this!
This really weird behaviour of UIWebView was caused by javascript code. The javascript was like (simplified):
<script>
function onLoad() {
location.href='xxx://pageLoaded';
}
</script>
<body onload='onLoad();'>
The idea of this code was to inform app about the fact that page was loaded. In the app I catch request to xxx://pageLoaded and cancel it (in shouldStartLoadWithRequest). Because request cancellation, I didn't expect any problems here. Espesially, I didn't expect that content will become invisible, but still clicable. I added timer (setTimeout) between onload fires and location.href change. It solves the problem.
NOTE: I know about webViewDidFinishLoad event in UIWebView. This is very simplified example just to explain the problem and the solution. Real javascript is more sophisticated and what it is doing can't be reached by simple use webViewDidFinishLoad.

Resources