What is the best way to preload images in this case?

Question

css

Good day! There are 30+ png files weighing 500kb each, they are shown on the page using css3 animation and js (toggle styles).
What's the best way to preload them?
<div id="preload1"></div>

#preload{
margin-left:  -9999px;
background: url(img1.png); 
display:block;
width: 1px;
height:1px;
}

and for each picture such a div? or in another way?
Thanks in advance for your reply!
UPD:
Regarding this decision , I read that it will not always load, because img must be on the page.
UPD 2:
On ipad'e:

Answer 1

It needs to be loaded into memory, not into a 1x1 px DOM element.
I load backgrounds like this:

function preload() {
 bgpath='/images-bg';
 for (var i=0;i<=bgnummax-1;i++) {
  bgimages[i]=new Image();
  bgimages[i].src=bgpath+"/"+(i+1)+".jpg";
 }

}