时间戳

首页 > 解决方案 > 首次加载时的图像渲染，显示其原始高度和宽度，不应用提到的 CSS

html - 首次加载时的图像渲染，显示其原始高度和宽度，不应用提到的 CSS

问题描述

当浏览器开始渲染时，我需要确保某些图像立即应用了特定的宽度（使用CSS类）。

目前，在带宽有限的网络上，图像显示其原始高度和宽度，而不是立即应用定义的CSS规则。设置max-height并width没有帮助。

.image-container{
  max-width: 100%;
  height: auto;
  display: block;
}
<img src='https://upload.wikimedia.org/wikipedia/commons/7/74/Earth_poster_large.jpg' />

标签： htmlcss

解决方案

是的，有一些解决方案。

我们可以在渲染时降低该图像的重要性，以便我们的初始 css 不会应用于更快的渲染。

<img src="xyz.png" importance="low">

其次，我们正在申请display:none组件的css类，onloading。一旦我们的 API 被解析并且 Loader 被移除，样式将会是 class display:block。

确保你的hideComponentclassName 应该在 main.css 中。

推荐阅读