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

この記事では主に読み込み遷移マスクを追加するための 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()
  })

効果は次のとおりです

最適化前はこんな感じでしたが、その差はまだ非常に大きいです

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

関連する推奨事項:

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

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