将图像分成多个部分而不会多次加载图像

Question

我想拍摄一张图片并将其分成多个独立的“部分”。我需要能够在不加载图像的情况下多次执行此操作，因为在一定数量的部分之后这将带来很多带宽。为了这个问题，我想将图像分成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解决方案没问题。

Answer 1

来自之前的评论

  

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

您可以使用background-position和optionnaly background-size以及一些动画来移动每个部分。 （受旧版codepen http://codepen.io/gc-nomade/pen/kFGya/启发）

＆＃13;

＆＃13;

#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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我会回应一位评论员上面所说的话：你不需要这样做。浏览器非常智能，无法重新下载同一资产，以便在文档中多次使用。您只需调用一次图像，就可以根据需要在页面中进一步使用它。

（除非该图像的标题已设置为“no-cache”，但大部分时间都不太可能）

Answer 3

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;