5

私の html ページには、外部の画像とフラッシュがあり、読み込みが遅い場合があります。gwt アプリは、ロード後に常に実行を開始します。xsiframeリンカーを使用します。

body 内にある画像やリソースをロードする前に gwt の実行を開始する方法はありますか? または、他のものをロードしても gwt の起動がブロックされないようにしてください。

編集:問題を再現する最小限のプロジェクトを作成しました:

エントリーポイント：

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

html ページ:

<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>
4

4 に答える 4

2

私が考えることができる2つの可能な解決策があります：

1.xsリンカー

「xsiframe」の代わりに古い「xs」リンカーを使用できます。特にxsは開発モードでは機能しないため、これはあまり良くありません。ただし、開発中に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 */

}
于 2012-05-24T09:55:01.700 に答える
1

まず、GWT についてあまりよく知らないのに「回答」してしまい、かなり見苦しいハックを提示してしまい、申し訳ありません。

さて、結果が定義されていない 2 つの非同期ロードは、私には競合状態のように聞こえます。したがって、アプリが読み込まれて「ロック解除」されるまで、画像/フラッシュを「ロック」する必要があると思います。

これを行う 1 つの方法は、すべてのアセットに の代わりにダミー属性を与えて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
    }
}

たぶん、あなたのニーズに合わせてこのようなものを適応させることができます.

于 2012-05-22T06:10:52.557 に答える
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>

しかし、どうやらベースを削除した後も、リソースを次のようなおかしなものでリロードする必要があります

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

この時点で、これまたはクライアント側の回避策は良い考えではないことに気付きました

代わりに、CDN のような別のサブドメインを介してコンテンツを配信してみませんか? 一般に、静的リソース用のカスタム キャッシング ポリシーなどを使用して、Cookie を使用しないドメインを用意することをお勧めします。

于 2012-05-23T09:55:35.810 に答える
0

私はこれが非常に古い質問であることを知っていますが、この問題を検索するとき、私はまだトップのグーグルヒットです.

現在の代替ソリューションは、画像に loading="lazy" を追加することです。（それがフラッシュで機能するかどうかはわかりません）。

于 2020-09-12T16:58:09.487 に答える