Geek asks and answers

GWT: get started before the page is ready (or the resources of the body will not block the start of gwt)?

External images and flashes appear on my html page, sometimes they load slowly. The gwt application always starts after loading. I am using the xsiframe linker .

Is it possible to run gwt before loading any images and resources inside the body? Or make sure loading other things will not block gwt from starting.

EDIT: I created a minimal project that reproduces the problem:

point of entry:

public class MyEntryPoint implements EntryPoint {
    public void onModuleLoad() {
        Window.confirm("onModuleLoad");
    }
}

html page:

<html><head>
    <script type="text/javascript"src="nocache.js"></script>
</head><body>
    <!-- http://stackoverflow.com/questions/100841/artificially-create-a-connection-timeout-error -->
    <img src="http://10.255.255.1/timeout.gif" alt="timeout image" />
</body></html>
+5
source share
3 answers

There are two possible solutions that I can think of:

1.xs linker

"xs" "xsiframe". , , xs dev. , , xsiframe , xs , .

2. <noscript>

, , <noscript>, , JavaScript.

JavaScript , . , GWT ( xsiframe ), , noscript .

:

<!doctype html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" language="javascript"
            src="http://cdn.example.org/.../some.nocache.js"></script>
  </head>

  <body>

    <noscript>
      <p>A</p>
      <img src="http://10.255.255.1/timeout.gif" alt="timeout image" />
      <p>B</p>
    </noscript>

    <p>Test (should appear immediately if JavaScript is enabled)</p>
  </body>
</html>

@Override
public void onModuleLoad() {

  final NodeList<Element> noscriptElems = 
      RootPanel.get().getElement().getElementsByTagName("noscript");

  final Element noscriptElem = noscriptElems.getItem(0);

  RootPanel.get().add(new Label("Here is GWT"));

  RootPanel.get().add(new HTMLPanel(noscriptElem.getInnerText()));
      /* Be careful of course, not to have bad html in your noscript elem */

}
+2

-, "", GWT , .

, undefined . , "" /, "" .

, dummy src, , src. :

HTML:

<img data-src="site.com/image.jpg" alt="loading..." />

:

public class MyEntryPoint implements EntryPoint {
    public void onModuleLoad() {
        var images = document.getElementsByTagName('img');
        for(var i=0; i<images.length; ++i){
            var dataSrc = images[i].getAttribute('data-src');
            if(dataSrc) images[i].src = dataSrc;
        }
        // ... rest of your entry point code
    }
}

, - .

+1

(duh!), , <base> : >

<head>
    <base id="src-plug" href="http://src-plug/"/>
    <script>
        function unplug(){
            setTimeout(function(){//or whatever; I guess ondomready
                var srcPlug = document.getElementById('src-plug');
                srcPlug.parentNode.removeChild(srcPlug);
            },5000);
        }
    </script>
</head>

But, apparently, after the database has been deleted, resources still need to be reloaded with something like dorky like

$('img').each(function(){
    $(this).attr('src',$(this).attr('src'));
});

After this point, I realized that this or any workaround on the client side would not be a good idea

Instead, why don't you deliver content through another subobject similar to a CDN? It is generally a good idea to have cookieless domains with custom caching policies, etc. For static resources.

+1
source

More articles: