Vue.js项目中的“闪烁”图像

Question

我正在使用Vue.js制作混合移动应用程序。我目前正在使用类星体框架。我在应用程序中添加了一个图像;使用<img />标记。我用过：

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

使其具有响应性。出于某种原因，当路线改变时或在应用程序开始时，此图像“闪烁”。通过闪光我的意思是：它显示为一个完整大小的图像，覆盖整个屏幕一瞬间，然后回到max-width: 100%;。我该怎么做才能防止这种情况？

Answer 1

您的CSS可能会在JavaScript之后加载，具体取决于CSS的大小以及触发更改样式的事件，您可能会遇到一些小的延迟。

您可以尝试在实际JavaScript之前在标头中加载CSS，并使用Chrome网络工具查看加载CSS时是否存在任何瓶颈。

优化CSS投放的其他提示包括：

• 最小化HTTP请求，使用CSS连接。
• 启用压缩，请考虑使用gzip。
• 缩小CSS，减少CSS文件大小。
• 启用浏览器缓存。
• 优化图像和SVG。