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。