如何通过分块逐步显示图像？

Question

如何通过分块逐步显示图像？

cssimagetransparencyloading

3

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

使用最小的带宽
最大化图片质量
创建图片各部分之间的过渡效果

所以，

我尝试使用Photoshop遗留的“导出为Web”功能，但我想在PNG中使用的Alpha层（透明度）被切割了，某些图像上还有微妙的噪音。
我考虑使用带有嵌入式转换的视频，但即使是VP9视频也比PNG技巧更大。
同样使用JPEG看起来也不太好，因为我不能使用透明度，而所有图片的总和比PNG技巧更大。

所以我想知道是否有人有任何想法如何做到这一点！如果需要，我很乐意添加更多关于此事的信息！

编辑

这是序列的第一张图片（没有任何编辑添加透明度）：

这是最后一张，总共有19张图片：

- PaulCo

2

你能得到没有蜡烛的完整图片，然后在单独的图像中淡入每个蜡烛吗？如果背景图片是没有蜡烛的相同图片，并且每个较小的图片正确定位，则不需要透明度转换也可以实现。 - mikepa88

1

@domdom 已完成。正如您所看到的问题是岩石上的轻微颠簸，因此我不能简单地在背景上使用小的png蜡烛。 - PaulCo

@mikepa88 整张图片是全黑的，因为每个蜡烛都照亮了洞穴！我添加了第一帧和最后一帧的图片。 - PaulCo

@PaulCo 我很好奇，你是否找到了任何其他解决方案（或方法的想法）来解决这个问题？你尝试过其他的东西吗？我很想看到这个实现。 - domsson

@domdom 还在考虑中，但我必须尽快找到一个解决方案，如果我想不出更好的办法，我可能会尝试你的建议！ - PaulCo

显示剩余5条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- domsson · Accepted Answer

如果你想单独点亮每个蜡烛，我不知道如何做到这一点而不使用太多图像，因此会占用太多带宽。因此，我无法提供完全符合您要求的解决方案。然而，我将建议一个临时解决方案，直到有人提出更好的解决方案。

想法：将30多个蜡烛分成三组，因为它们似乎排列成大约三行。虽然有点棘手，但岩石几何形状确实可以相应地被切割出来。

细节： - 创建四张图片/层： - 全暗 - 一排点亮 - 两排点亮 - 所有排都点亮 - 使用 JPG 格式，尽可能小（宽度可能为 1280px，质量约为 70%） - 不使用 img，而是使用每个层的一个 div，并使用 CSS 的 background-image 属性 - 将所有层放在彼此上面（第四层在顶部），并使用 position: absolute 进行定位 - 使用 JavaScript，在页面加载了三分之一时淡入另一层

使用background-image的原因是，你可以轻松使用CSS将div容器拉伸到100%的width和height（假设整个内容都应该是全屏的），并使图像轻松适应任何分辨率和纵横比。将1280像素宽的JPG放大到1920像素通常看起来还不错，但您需要调整图像大小和JPG质量以达到最佳效果。使用我建议的设置（见上文），所有四个图像应该合计约为400到500 KB。 示例：
^{_{请注意，这是根据您的第一帧和最后一帧制作的粗略模型 - 您肯定可以用手头的原始材料做得更好。}}

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>

这是一个指向fiddle的外部链接。