1

Am using Cefsharp 39.0.0 to load a webpage inside a winform. Now while the page loads the form is blank. How do I show a loading gif?

public Browser() {
    InitializeComponent();
    string clientURL = "www.imdb.com";

    ChromiumWebBrowser browser = new ChromiumWebBrowser(clientURL);

    browser.Dock = DockStyle.Fill;

    toolStripContainer.ContentPanel.Controls.Add(browser);


    browser.RegisterJsObject("camera", new Camera());

}

I looked into NavStateChanged event. but am not sure how to go about using it to display a loading image from local resoruce in the form until the webpage loads fully.

EventHandler < NavStateChangedEventArgs > handler = null;
handler = (sender, args) = > {

    //TODO : show a loading gif until the page load completes

    //Wait for while page to finish loading not just the first frame
    if (!args.IsLoading) {
        browser.NavStateChanged -= handler;

        MessageBox.Show("The page has completed loading", "Load completed", MessageBoxButtons.OK);
       //TODO : once load complete show the actual page
    }
};
gopstar
  • 155
  • 1
  • 10

2 Answers2

1

Our application is C++, but some of this might apply. We have an html file compiled into our application as a resource, and we pass that URL to CefBrowserHost::CreateBrowserSync(), it looks like in your case it will be "new ChromiumWebBrowser()". We let the splash screen load the real URL we want, meanwhile it shows an animated GIF. So the call might look like

new ChromiumWebBrowser("http://embeddedsplashscreen.html");

The body of our embeddedsplashscreen.html has

<body class="splash" onload=" pageLoad() ">

and the pageLoad() looks like

    function pageLoad() {
        window.location = "www.urlyoureallywant.com";
        }          
    }

Our splash screen has a background set by style sheet and an animated gif, and it goes away as soon as the requested url comes in.

What I don't know for CefSharp is how you can specify local resources. In C++ we used the techniques from resource_util_win.cpp in cefclient sample, in particular GetResourceId() for associating the URL to the compiled resource ID, which it does by matching the text in the URL in a hard-coded table.

For CefSharp I found these links which may be helpful - http://thechriskent.com/2014/05/12/use-embedded-resources-in-cefsharp/ and CefSharp LoadHtml

Community
  • 1
  • 1
PhysicalEd
  • 784
  • 7
  • 10
0

answer from Alex Maitland on Cefsharp google groups

You can either load your own 'Loading Page' initially from local disk which is pretty fast.

First approach is using a ResourceHandler (You can load a stream from disk). https://github.com/cefsharp/CefSharp/blob/master/CefSharp.Example/CefExample.cs#L98 (You should also use a SchemeHandler, which gives a bit more flexibility see https://github.com/cefsharp/CefSharp/blob/master/CefSharp.Example/CefSharpSchemeHandler.cs#L46)

The option totally unrelated to CefSharp is to overlay an image over the control and remove it when your done. This is likely to give the best user experience. I'm sure somewhere like stackoverflow has information on this in a general sense. Remember if you hide the browser instance it will stop rendering (performance reasons), it will continue loading.

If you don't need proxy support then disabling it should slightly speed up the initial load (proxy resolution takes a while relatively speaking) https://github.com/cefsharp/CefSharp/blob/master/CefSharp.Example/CefExample.cs#L39

gopstar
  • 155
  • 1
  • 10