Mask image into multiple portions without loading image multiple times

问题

I would like to take an image and split it into multiple self-contained "portions". I need to be able to do this without loading the image multiple times because after a certain number of portions this will be a lot of bandwidth. For the sake of this question I would like to split an image into 4 quadrants but ideally it will be scalable.

Notice how there isn't just a white "window frame" overlay, the top-right quadrant starts where the top-left left off.

Here is a fiddle I made that accomplishes what I want except it has to load the image for all 4 quadrants. 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);
}

Is it possible to do that with just one image load? CSS or Jquery solutions are fine.

回答1:

from earlier comment

what about setting image in CSS background-position ? would it be for a puzzle game ? http://codepen.io/gc-nomade/pen/JRAdOm (used some flex and animation to move each visible parts around) your script will have to switch a class name (easier than just background-image) only once

You may use background-position, and optionnaly background-size and some animation to move each parts around. (inspired from an older codepen 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:

I'd echo what one of the commentors said above: You don't need to do this. Browsers are smart enough to not redownload the same asset for use more than once in a document. You call the image once and you're set for as often as you need to use it further in the page.

(Unless the header for that image has been set to 'no-cache', but that's unlikely most of the time)

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

来源：https://stackoverflow.com/questions/39800704/mask-image-into-multiple-portions-without-loading-image-multiple-times

标签

jquery

css

image

clip