ホームページ  >  記事  >  ウェブフロントエンド  >  Jqueryは読み込み遷移マスクを追加します

Jqueryは読み込み遷移マスクを追加します

不言
不言オリジナル
2018-07-07 17:37:162080ブラウズ

この記事では主に読み込み遷移マスクを追加するための Jquery を紹介します。これには特定の参照値があります。必要な友達はそれを参照してください。

h5 プロジェクトをパッケージ化するには webpack を使用します。CSS もバンドルにパッケージ化されています。 .js では、読み込みが少し遅いと、数秒間スタイルがないと見苦しいページが表示されるため、白いマスクを設定して、js の読み込み後に消えたいと考えています。
独自のインライン スタイルを使用して読み込みブロックを本文に配置します (そのため、最初に読み込まれる際に Bundle.js で提供されるスタイル情報に依存する必要はありません)。

  <!-- index.html -->
  <p></p>

その後、js がロードされるのを待って、消えるメソッドを実行します。ここでは、より自然な遷移を実現するために animate() のコールバック関数を使用します。調整にもっと時間を費やしたい場合は、十分な余裕があります。 。

 //index.js(打包后出现在bundle.js里)
  $('#loading').animate({
    opacity: '0'
  }, function () {
    $('#loading').hide()
  })

効果は次のとおりです
Jqueryは読み込み遷移マスクを追加します

最適化前はこんな感じでしたが、その差はまだ非常に大きいです
Jqueryは読み込み遷移マスクを追加します

上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

デジタルスクロール効果を実現するためのvue

以上がJqueryは読み込み遷移マスクを追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。