How to avoid the loading of Google jsapi blocks the web page loading

Question

We have a GWT web application which used Google jsapi and jquery as well.

In the index.html, we have loaded the Google jsapi as below:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

However, this seems will hanging the loading of web page until it's timeout when the client is unable to access Google. In some country, for example, China.

I have changed the above script element as follows, not quite sure that is this correct or not:

<script type="text/javascript">
$.ajax({
    url: 'https://www.google.com/jsapi',
    dataType: 'script',
    cache: true
});
</script>

And try to block myself client so it is unable to access www.google.com, however, when loading the page, it still pending for loading jsapi. I have check the network log of browser console, there are two Initiators as below

ajax    @   jquery.min.js:127
(anonymous function)    @   (index):18

Of cause, the index:18 is above script element. But I don't understand that about the jquery.min.js:127, which I included from local in index.html as below

<script type="text/javascript" src="/js/jquery.min.js"></script>

This jquery.min.js is jQuery v1.4.2 as this link , but it looks like there has no google jsapi loading at the line 127?

Answer 1

Have a look at the GWT AjaxLoader . With this you don't have to add

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 

to your HTML. You can execute the jsapi loading in the GWT Java Code. This for example would load the search module:

AjaxLoaderOptions options = AjaxLoaderOptions.newInstance();
//add options if you want to
AjaxLoader.loadApi("search", "1", new Runnable() {
    @Override
    public void run() {
        //do what you like
    }
}, options);

I don't experience any lag of loading using this approach.