1

私は自分のサイトのベースとしてポリマー スターター キット 1.3 を使用しています。ボディが読み込まれた後にローダー div を削除したいと考えています。

私のコード構造は次のようになります: (「async」および「unresolved」属性に注意してください)

<head>
...
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
...
<link rel="import" id="bundle" href="/elements/elements.html" async>
...
</head>

    <body>    

          <div id="loader-wrapper" async">
            <div id="loader"></div>
          </div>

          <style async>
            ...
          </style>


       <template unresolved>
         ....
       </template>

       <script src="scripts/app.js" async></script>
    </body>

私のapp.jsは

window.addEventListener('WebComponentsReady', function() {
    // imports are loaded and elements have been registered
     ...

  });

私は試した

window.addEventListener('WebComponentsReady', function() {
    // imports are loaded and elements have been registered
     $('#loader-wrapper').remove();

  });

もちろん、Googleで見つけたのはこれだけで、jsの知識レベルはほぼゼロであるため、うまくいきませんでした。

スピナーは即座にロードされるので、非同期属性は本来あるべき場所にあると思いますが、ページがロードされた後もローダーはそこにとどまります。

したがって、私が理解している限り、これは未解決の「何か」をリッスンしてロードし、その「ローダーラッパー」divを削除できるコードです

問題は、そのapp.jsコードで「...」の代わりにどのコードを配置する必要があるかです。私は何か悪いことをしますか？

4

2 に答える 2

1

あなたが使おうとしたのはjQueryです。インデックスに jQuery をインポートしていない可能性が高く、そうすべきではない可能性が高いです。使用したいのは、div を削除するためのネイティブ ウィンドウ/ドキュメント関数です。

必要なことは、要素を取得することです。この場合、要素には id があるため、id を使用します。その後、削除できます。

var loaderWrapper = document.getElementById('loader-wrapper');
loaderWrapper.parentNode.removeChild(loaderWrapper);

これでdivが削除されます。メソッドを使用する必要があるのx.parentNode.removeChild(x)は、ネイティブ関数を使用して dom から何かを削除する唯一の方法は、親を通じて削除することだからです。

次の記事を読んで、そのベースからロードする非同期要素を実装することをお勧めします。ほとんどの場合、あちこちでいくつかのことを変更する必要がありますが、時間の経過とともに、学ぶ意欲があれば成功します。

記事:

于 2016-04-22T18:20:05.830 に答える
0

上で@Snekwが提案した善良な人として、私は問題を解決することができました。ここにすべてのコードがあります。

他の誰かが同じ問題に直面している場合、それはあなたにも役立つかもしれません。

これは、ページの構造がどのように見えるかです（スピナーローダーを配置したいページ）

(すべての非同期および未解決の属性に注意してください)

<head>
...
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
...
<link rel="import" id="bundle" href="/elements/elements.html">
...
</head>

    <body>    

          <div id="loader-wrapper" async">
            <div id="loader"></div>
          </div>

          <style async>
            ...
          </style>


       <template unresolved>
         .... 
       </template>

       <script src="scripts/app.js" async></script>
    </body>

次に、app.js ファイルを開きます(Polymer スターター キット アドバンスドは、デフォルトで /app/scripts/ にあります)。

そしてこれを見つけます：

  // See https://github.com/Polymer/polymer/issues/1381
  window.addEventListener('WebComponentsReady', function() {
     // imports are loaded and elements have been registered
     ...

  });

次に、@Snekwが提案したコードを追加するだけで、次のようになります

  // See https://github.com/Polymer/polymer/issues/1381
  window.addEventListener('WebComponentsReady', function() {
    // imports are loaded and elements have been registered

     var loaderWrapper = document.getElementById('loader-wrapper');
     loaderWrapper.parentNode.removeChild(loaderWrapper);
  });

ローダー div の名前を確認してください。ローダー ラッパーでない場合は、上記の jquery コードで名前を変更することも忘れないでください。

スピナー ローダー アニメーション自体の作成方法がわからない場合は、次のコードを使用してください。

<div id="loader-wrapper" async style="z-index: -100; ">
    <div id="loader"></div>
</div>

  <style async>
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}


  </style>

の代わりにそこに置く

これ

          <div id="loader-wrapper" async">
            <div id="loader"></div>
          </div>

          <style async>
            ...
          </style>

更新: 重要な注意事項

1〜3秒のスムーズなアニメーションを表示してからメインコンテンツのページをスムーズに表示するのに時間がかかるため、Firefoxでは完全かつスムーズに動作します

ただし、非常に軽量なページを Chromium のようなブラウザーで開いた場合、ページは Firefox よりもはるかに高速に読み込まれ (おそらく Firefox がポリフィルを読み込むため)、アニメーションはほとんど表示されず、ページの読み込みが原因で不具合が発生する可能性があります。そんなに早く。

これを解決するために、animate.css ( https://github.com/daneden/animate.css ) を使用し、テンプレート全体を

<div class="animated fadeIn"> <template.... ... </div>

そして、変更しました

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;

に

.animated {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;

animate.cssで

その後、インポート

<link rel="stylesheet" href="../../styles/animate.css">

elements.html へ

必要に応じて、よりスマートなことを行ってください。私は Web 開発が初めてなので、他のことは知りません。他の誰かがここにいくつかのアイデアを追加するかもしれません。

于 2016-04-23T13:08:17.567 に答える