Show Image While Loading Webview

Question

I am trying to show an image (logo) while the WKWebView is loading.

So, looking at other posts, I would put an image on the screen in ViewDidLoad() and hide the image in the didFinish method. But, for some reason, the didFinish method is not working. It does not print that it finished (although the webview does show up on the screen). For this, I also already looked at other posts. But, these mainly suggest to set the delegate of the WKWebView (which I did). Here is my code:

import UIKit
import Foundation
import WebKit

class ViewController: UIViewController, WKUIDelegate {

    var webView: WKWebView!

    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.


        let myURL = URL(string:"https://www.mijnmedicijn.nl/")
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
    }

    func webView(_ webView: WKWebView,
                          didFinish navigation: WKNavigation!){
        print("Webview did finish load")

    }

    func webView(_ webView: WKWebView,
                 didStart navigation: WKNavigation!){
        print("Webview did start laoding")

    }
}

What am I doing wrong? Why doesn't the didFinish work? How would I make it work and show an image while loading?

Answer 1

You need to add the delegate of the navigation

webView.navigationDelegate = self

---

class ViewController: UIViewController , WKUIDelegate , WKNavigationDelegate {

Answer 2

First of all, optional func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) is a method declared in WKNavigationDelegate hence your class must conform to protocol WKNavigationDelegate and your code must look like webView.navigationDelegate = self

Secondly, for your another question in comments "Why does it print the statement seconds after the webview is already loaded on my phone?"

The optional func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) is called when webview mainframe navigation gets completed i.e. WKWebView fully completes loading the entire page.

An ideal implementation for showing/hiding loading image would be,

1. Conform to WKNavigationDelegate.
2. Implement optional func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) and write code to show the loading image in this function. As this function gets called as soon as WKWebView starts mainframe navigation.
3. Implement optional func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) and write code to hide the loading image in this function. As this function gets called as soon as contents start arriving in WKWebView.
4. Also implement optional func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) and write code to hide the loading image in this function. This function should be implemented just-in-case URL loading fails.