时间戳

首页 > 解决方案 > 在浏览器中加载时不显示 JPEG 的背景

html - 在浏览器中加载时不显示 JPEG 的背景

问题描述

对于我网站的某些用户，我的图片可能加载缓慢，因此我希望在加载时有一个合理的后备占位符。我找到了gradify 库，它可以创建与图像匹配的 CSV 渐变。

在图像开始加载之前，会显示背景渐变。但是，一旦图像开始加载，它就会被替换为白色背景，然后从上到下加载。

（您可以通过在加载图像时激活浏览器开发工具中的限制来看到这一点。）

在没有 JavaScript 的情况下，是否有可能在完全下载之前不开始显示图像？

我想我可以通过更改为隔行扫描/逐行扫描图像来部分缓解这种情况，但我仍然对问题的答案感兴趣:)

body {
  /* just centering stuff, not really part of the question */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  
  /* bg so you can see the effect */
  background: radial-gradient(circle, #222 0%, #aaa 100%);
}

img {
  width: 10em;
  height: 10em;
  border: 5px solid purple;
  border-radius: 50%;
  box-sizing: border-box;

  /* generated by gradify */
  background-color: rgb(72,148,223);
  background-image: linear-gradient(270deg, rgba(72,148,223,1) 0%, rgba(72,148,223,0) 100%),linear-gradient(90deg, rgba(49,98,174,1) 0%, rgba(49,98,174,0) 100%),linear-gradient(180deg, rgba(114,129,143,1) 0%, rgba(114,129,143,0) 100%),linear-gradient(0deg, rgba(43,48,71,1) 0%, rgba(43,48,71,0) 100%);
}
<html>
  <body>
    <img src="https://jpeg.org/images/about.jpg">
  </body>
</html>

标签： htmlcss

解决方案

推荐阅读