ホームページ > 記事 > ウェブフロントエンド > 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 サイトに注目してください。
関連する推奨事項:
以上がJqueryは読み込み遷移マスクを追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。