Vue.jsプロジェクトの「点滅」画像

Question

Vue.jsを使用してハイブリッドmoblieアプリケーションを作成しています。私は現在、quasarフレームワークを使用しています。アプリケーションに画像を追加しました。 <img />タグを使用します。私は：

img.logo { 
    max-width: 100%; 
} 

それを反応させるために使用しました。ルートが変更されたとき、またはアプリケーションの開始時に何らかの理由で、このイメージが「点滅」します。点滅すると、画面全体を1秒間に渡ってカバーし、次にmax-width: 100%;に戻るフルサイズの画像として表示されます。それを防ぐために私は何ができますか？

Answer 1

CSSのサイズに応じて、JavaScriptの後にCSSが読み込まれている可能性があります。変更するスタイルをトリガするイベントが多少遅延することがあります。

実際のJavaScriptの前にヘッダーにCSSを読み込み、Chromeネットワークツールを使用してCSSを読み込むときにボトルネックがないかどうかを確認できます。あなたのCSSの配信を最適化するために

さらなるヒントがあります：

• CSSの連結を使用して、HTTP要求を最小限に抑えます。
• 圧縮を有効にするには、gzipを検討してください。
• CSSのファイルサイズを減らすために、CSSをミニドキュメント化します。
• ブラウザのキャッシュを有効にします。
• イメージとSVGを最適化します。