如何逐块渐进显示图像？

Question

我正在尝试为网站制作加载动画：一个充满蜡烛的图像，每根蜡烛都在网站加载时出现。我的主要目标是：

使用最小带宽
最大化图片质量
在图片的每个部分之间创建过渡

所以，

我尝试使用 Photoshop 遗留的 Export for Web 功能，但我想在 PNG 中使用的 alpha 层（透明度）随后被细分，它们在一些图片。
我考虑过使用带有嵌入式过渡的视频，但即使是 VP9 视频也比 PNG 技巧大。
使用 JPEG 看起来也不太好，因为我不能使用透明度，而且所有图片的总和都比 PNG 技巧大。

所以这就是为什么我想知道是否有人知道如何做这样的事情！如果有人问我，我很乐意添加更多相关信息！

编辑

这是序列的第一张图片（没有任何编辑以增加透明度）：这是最后一张，共有 19 张图片：

Answer 1

如果你想单独点亮每根蜡烛，我不知道如何在不使用太多图像的情况下做到这一点，因此带宽太大。因此，我无法提供完全适合您要求的解决方案。但是，我会建议一个临时解决方案，在有人想出更好的办法之前可能会奏效。

想法：
将 30 多根蜡烛分成三组，因为它们似乎大致排列成三行。
虽然有点棘手，但岩石几何形状也适合相应地切割。

细分：

创建四张图片/图层：
1. 全黑
2. 一排点亮
3. 两行点亮
4. 所有行亮起
使用 JPG，尽可能小（宽度可能为 1280 像素，质量约为 70%）
不使用 img，而是使用 div 每层 CSS background-image
使用 position: absolute
每当页面的三分之一已加载时，使用 JavaScript 淡入另一层

使用 background-image 的原因是您可以轻松地使用 CSS 将 div 容器拉伸到 100% width 和 height（假设整个东西应该是全屏的）并使图像轻松适应任何分辨率和纵横比。将 1280 像素宽的 JPG 放大到 1920 像素通常看起来还不错，但您必须调整图像大小和 JPG 质量才能达到最佳效果。使用我建议的设置（见上文），所有四张图片最终应该合计大约 400 到 500 KB。

示例：
^{_{请注意，这是基于您的第一帧和最后一帧的粗略模型 - 您肯定可以使用手头的原始 material 做得更好。}}

var timer = new Array(3);
var fader = new Array(3);
var layer = new Array(3);

function fade() {
  for (var i=0; i<3; ++i) {
    layer[i]  = document.getElementById("s" + (i+1));
   layer[i].style.opacity = 0.0;
    clearTimeout(timer[i]);
    clearInterval(fader[i]);
    start(i);
  }
}

function start(i) {
  timer[i] = setTimeout(function() {
    fader[i] = setInterval(opacity, 20, i);
  }, (2000*i));
}

function opacity(i) {
  var style = window.getComputedStyle(layer[i], null);
  var opacity = parseFloat(style.getPropertyValue("opacity"));
  if (opacity >= 1) {
    clearInterval(fader[i]);
  } else {
    layer[i].style.opacity = (opacity + 0.01);
  }
}

.container {
  position: relative;
  width: 600px;
  height: 417px;
}

.candles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.0;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
}

#s0 {
  background-image: url(http://i.imgur.com/ZQqeebI.jpg);
  opacity: 1.0;
}

#s1 {
  background-image: url(http://i.imgur.com/ah7UP3x.jpg);
}

#s2 {
  background-image: url(http://i.imgur.com/zLgBA5x.jpg);
}

#s3 {
  background-image: url(http://i.imgur.com/ar4w18n.jpg);
}

button {
  width: 600px;
  padding: 0.4em;
}

<div class="container">
  <div id="s0" class="candles"></div>
  <div id="s1" class="candles"></div>
  <div id="s2" class="candles"></div>
  <div id="s3" class="candles"></div>
</div>
<button onclick="fade()">Fade</button>

这是一个external link to the fiddle.

如何逐块渐进显示图像？

How to display an image progressively by chunks?

css

transparency

image

loading

编辑