"Flashing" Bild in Vue.js Projekt

Question

Ich benutze Vue.js, um eine Hybrid-Moblie-Anwendung zu machen. Ich verwende derzeit ein Quasar-Framework. Ich habe ein Bild in der Anwendung hinzugefügt. mit <img /> Tag. Ich benutzte:

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

, um es reaktionsfähig zu machen. Aus irgendeinem Grund, wenn die Route geändert wird oder zu Beginn der Anwendung, "blinkt" dieses Bild. Mit Blitzen meine ich: es erscheint als ein Bild in voller Größe, das den ganzen Bildschirm für einen Bruchteil einer Sekunde abdeckt und dann zurück zu max-width: 100%; geht. Was kann ich tun, um das zu verhindern?

Answer 1

Es ist möglich, dass Ihr CSS nach Ihrem JavaScript geladen wird. Abhängig von der Größe Ihres CSS und dem Ereignis, das den zu ändernden Stil auslöst, kann es zu geringfügigen Verzögerungen kommen.

Sie könnten versuchen, Ihr CSS in die Kopfzeile vor Ihrem eigentlichen JavaScript zu laden und mithilfe der Chrome Network-Tools festzustellen, ob beim Laden Ihres CSS Engpässe auftreten.

Weitere Tipps, um Ihre CSS Lieferung zu optimieren sind:

• Minimieren von HTTP-Requests, CSS Verkettung verwenden.
• Aktivieren Sie die Komprimierung, betrachten Sie gzip.
• Minimieren Sie Ihr CSS, um die CSS-Dateigröße zu reduzieren.
• Browser-Caching aktivieren.
• Optimieren Sie Bilder und SVG.