Preloading UIWebView content

Some of the biggest visual advantages of native apps are the snappy interaction, the nice animations and the INSTANT visualization of views and information.

Too bad that UIWebView needs a few (mili)secs to show web content – depending on the page you’re loading or the hardware you’re using.

Just try it: load up content using This results in a white view being displayed shortly before everything is rendered and displayed. This is even the case for locally stored html content that you included in your app’s package. It appears as if the rendering just needs some time to complete no matter what the source is… Yikes!

To avoid the white void from being displayed, there are two options that you can choose from:

  • Preloading the UIWebView content before displaying
    As described on this page this involves setting the ViewController currently in charge as delegate of the webview and wait until the webview has loaded the content. This is handy if you have something like a table with cells and you need to load web content into a webview on the detail page depending on the user’s selection (or similar cases). Just set the delegate as following:

    [crayon-66fea42dda38f776656983/] Then implement the webViewDidFinishLoad function in the viewcontroller and navigate to the next level in this function to show the view only after the content has arrived in the webview:
    [crayon-66fea42dda397632858021/] If you want to go for an A-grade solution, add something like a “preload” function to the detail page’s ViewController that contains the UIWebView and add a delegate property to that ViewController too. Then you can create the detail ViewController, set the delegate to the calling ViewController and call preload on the detail ViewController. Implementing the webViewDidFinishLoading in the calling ViewController will trigger the function as soon as the detail page’s webview is done loading.
  • Using a dummy UIWebView object to load the data and add it as a subview
    This involves creating a dummy UIWebView object and loading the content as you normally would. Load this up on a splashview ViewController or on the application’s tabbarcontroller class (or in another controller that is loaded up as soon as the app starts). When the view (let’s call it “webcontent” view) that needs to display the content is actually loaded, add the dummy UIWebView object by using the webcontent view’s addSubView in the ViewDidLoad.
    Just make shure that the Frame, ScalesPageToFit and autoresizing properties are setup to make the view appear as intended and you’ve got yourself an instant webview without the boring white intervention.

Let me know if you have another nice way to skip the white waiting-room effect when loading webview content.