将图像屏蔽成多个部分，无需多次加载图像答案

【问题标题】：Mask image into multiple portions without loading image multiple times将图像屏蔽成多个部分，无需多次加载图像
【发布时间】：2016-09-30 22:04:12
【问题描述】：

我想拍摄一张图片并将其分成多个独立的“部分”。我需要能够在不多次加载图像的情况下做到这一点，因为在一定数量的部分之后，这将是很多带宽。为了这个问题，我想将图像分成 4 个象限，但理想情况下它是可扩展的。

请注意，不只是一个白色的“窗口框架”覆盖，右上角的象限从左上角的左上角开始。

这是我做的一个小提琴，它完成了我想要的，除了它必须为所有 4 个象限加载图像。 https://jsfiddle.net/gm4os1Ld/

#first{
  position:absolute;
  clip: rect(0, 217px, 159px, 0);
}

#second{
  position:absolute;
  left: 20px;
  clip: rect(0px,435px,159px,217px);
}
#third{
  position:absolute;
  top: 20px;
  clip: rect(159px, 217px, 318px, 0);
}
#fourth{
  position:absolute;
  left: 20px;
  top: 20px;
  clip: rect(159px,435px,318px,217px);
}

是否可以只加载一张图片来做到这一点？ CSS 或 Jquery 解决方案都可以。

【问题讨论】：

为什么不只加载一次图像并用“窗框”覆盖它？这样你只需要处理每个窗口。
“我需要能够在不多次加载图像的情况下做到这一点，因为在一定数量的部分之后，这将是很多带宽。”这不是浏览器的工作方式。通常，一旦第一次加载图像，浏览器就会缓存它。这意味着它将在本地存储一段时间，随后的请求会从文件系统加载它，而不是多次重新下载。
@Baldráni 因为那样我会隐藏图像的一些像素，除非我不明白你的意思？
@DasBeasto 这是一个很好的观点。如果您拥有完全控制权（您自己的网站或其他任何东西），这是一回事，但对于插件来说，它有点难以预测。有人可能会犯这个错误，但我认为这是一个不太可能的边缘案例。我能想到的唯一另一种解决方法是使用画布“绘制”图像部分并以这种方式构建您的集合，但即便如此，您更有可能遇到拥有旧版本 IE 的用户不支持画布，而不是访问完全禁用缓存的网站。
@GCyrillus 这实际上非常适合我的目的。这不是游戏，这部分只是具有这种样式的静态图像（尽管这些动画是额外的）。如果你做出这个答案，我会接受它！

标签： jquery css image clip

【解决方案1】：

来自之前的评论

在 CSS background-position 中设置图像怎么样？会是益智游戏吗？ http://codepen.io/gc-nomade/pen/JRAdOm（使用一些 flex 和动画来移动每个可见部分）你的脚本只需要切换一次类名（比背景图像更容易）

您可以使用background-position 和可选的background-size 和一些动画来移动每个部分。 （灵感来自旧的代码笔 http://codepen.io/gc-nomade/pen/kFGya/）

#mybox {
  width:456px;
  display:flex;
  flex-wrap:wrap;
}
.splitImg {
  padding: 5px;
  background: url(http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg) no-repeat;
  height: 159px;
  width: 218px;animation : reorder 5s infinite alternate ;
  background-clip: content-box;
  background-size:195%;
}
#first {
  background-position:5px 5px;
}
#second {
  background-position:-213px 5px;
  animation-delay:1.25s
}
#third {
  background-position:5px -154px;
  animation-delay:2.5s
}
#fourth{
  background-position:-213px -154px;
  animation-delay:3.75s
}
@keyframes reorder {
  from {
    order:1;
  }
  25% {
    order:2
  }
  50% {
    order:3
  }
  75% {order:4;
  }
  to {
    order:1;
  }
}

<div id="mybox">
  <div id="first" class="splitImg"></div>
  <div id="second" class="splitImg"></div>
  <div id="third" class="splitImg"></div>
  <div id="fourth" class="splitImg"></div>
</div>

【讨论】：

【解决方案2】：

我会附和上面一位评论者所说的：你不需要这样做。浏览器足够聪明，不会重新下载相同的资产以在文档中多次使用。您只需调用一次图像，就可以根据需要在页面中进一步使用它。

（除非该图像的标头已设置为“无缓存”，但大多数情况下不太可能）

【讨论】：

【解决方案3】：

.grid { 
  width:400px;
  height:400px;
  display: inline-block;
  background:url("https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg");
  background-size:0;
  background-repeat:no-repeat;
}
.grid>div {
  display:inline-block;
  width:48%;
  height:48%;
  background:inherit;
  background-size:200% 200%;
  transition:all 1s linear;
}
#first{}
#second{  background-position-x:100%;}
#third {  background-position-y:100%;}
#fourth{  background-position-x:100%; background-position-y:100%;}

.grid>div:hover {
  transform:rotate(360deg);
}

<div class="grid">
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
</div>

【讨论】：