Displaying a background image on UIWebView

Question

I'm trying to build a native application that for all intents and purposes is HTML/CSS and Javascript. It all works fine, but when the UIWebView loads there's a delay while the DOM is populated, images retrieved etc.

Is there anyway to display a background image on the UIWebView, or something behind it? Ideally this will be the same as the splash screen so it doesn't affect the experience of transitioning from slash to app.

Thanks

Robbie

Answer 1

I don't believe you want to be setting the UIWebView as transparent and showing an image behind it.

Instead you should have some sort of view (maybe with a picture as you suggest, maybe with a UIIndicator and a semi-transparent view that "darkens" the page) that sits there until the UIWebView has loaded its content.

To do this, first your class should subscribe to the UIWebViewDelegate protocol:

@interface myWebView : UIViewController <UIWebViewDelegate> {
  // variables etc
}

Then, you can show a view on load:

-(void)viewDidLoad {
  myView.hidden = NO;
}

And finally, you can override the webViewDidFinishLoad method to hide it once it's loaded

- (void)webViewDidFinishLoad:(UIWebView *)localwebView {
    myView.hidden = YES;
}

Answer 2

I've had to do the following in my code to get a transparent background on my UIWebViews - I usually do this in the viewDidLoad method of the UIViewController

self.webView.backgroundColor = [UIColor clearColor];
self.webView.opaque = NO;

I think you can also make those changes in Interface Builder in the UIWebViews properties.

--- edit ---

And for the background image you can just put a UIImageView in behind the UIWebView now that you've given it a transparent background.

Answer 3

 webView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"senthil.jpg"]];

Answer 4

Add the Image to View Controller in XIB or to Plist of "Launch Image". This will show the Splash Screen from Beginning. While loading the webView in viewDidLoad hide the webView

webView.hidden = YES;

Load the webView with HTML content as usual in viewDidLoad

Once the webView is loaded, perform updating the view after some. I think this will allow some time for delegate function to complete and proceed with UI updates.

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    [self performSelector:@selector(updateWebView) withObject:nil afterDelay:1];
}

-(void) updateWebView {
    webView.hidden = NO;
    self.view = webViewElement;
    // or
    [self.view addSubview:webViewElement];
}

I tried as above is working fine with no white Screen.