Как в данном случае лучше сделать предварительную загрузку изображений?

Question

[littleguga]

Доброго времени суток! Есть 30+ png файлов весом по 500кб каждый, они показываются на странице с помощью css3 анимации и js(переключает стили).
Как лучше их заранее прогрузить?
<div id="preload1"></div>

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

и для каждой картинки такой див? или по другому?
Заранее благодарен за ответ!

UPD:
Относительно этого решения - прочитал, что не всегда будет грузиться, ибо img должен быть на странице.

UPD 2:
На ipad'e:

Answer 1

[xmoonlight]

В память нужно грузить, а не в DOM-элемент 1x1 px.
Я фоновые гружу так:

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

}

Comments

[littleguga]

Потерял ссылку, про такое решение писали, что оно не всегда будет работать, ибо нужно, чтобы картинка была на странице.

[littleguga]

Но датировалась та статья вроде 2009 годом, не актуально или и тогда было неправдой?

[xmoonlight]

littleguga: хотите образец работы? karaoke.shotme.ru

[littleguga]

xmoonlight: спасибо!

[xmoonlight]

littleguga: Welcome!

[littleguga]

xmoonlight: не работает на ipad :(

[xmoonlight]

littleguga: что конкретно не работает картинки в караоке или что?

[littleguga]

xmoonlight: предзагрузка таким образом. Сейчас скрины добавлю.

[littleguga]

xmoonlight: добавил скрины в основной вопрос.

[xmoonlight]

littleguga: вроде на iPhone 4 работало проверяли... а iPad какой конкретно?

[littleguga]

xmoonlight: первый, если не ошибаюсь. А может 2. Попробую вечером добраться до более современной техники. До меня просто тоже только сейчас дошло, что это может быть из-за старого девайса.

[xmoonlight]

littleguga: вообще, это баг и я бы хотел его совместно с Вами "придавить")

[littleguga]

xmoonlight: me988ru/a - ipad air. Не работает в safari. Да я, если честно даже не знаю, в какую сторону копать. Откуда он растет?

[littleguga]

xmoonlight: у меня возникает проблема именно при загрузке фоновых изображений. Есть блок, на него по очереди вешаются классы с background-url() и как бы я не грузил картинки(в другой css блок за пределами экрана, через js, даже извратился и написал костыль, который прогонял по очереди эти классы на блоке, но сдвигая его за пределы экрана, и потом возвращал всё в норму) - не помогает.
Относительно сайта с караоке- там одна картинка, так что на ipad'e особо протестировать не могу.

[xmoonlight]

littleguga: там 2-е, тайм-аут 30 сек.

[littleguga]

xmoonlight: нашел решение.

[xmoonlight]

littleguga: ОГО! КРУТО! и как справились?

[xmoonlight]

littleguga: а-а внизу... я понял (не заметил вначале)

Answer 2

[littleguga]

/* Preload images */
body:after{
  content: url('img/cats/awesome.png') url('img/map.png') url('img/cats/kiss.png') url('img/cards/11.png') url('img/cards/12.png') url('img/cards/21.png') url('img/cards/22.png') url('img/cards/31.png') url('img/cards/32.png') url('img/cards/41.png') url('img/cards/42.png') url('img/cards/51.png') url('img/cards/52.png') url('img/cards/61.png') url('img/cards/62.png') url('img/cards/71.png') url('img/cards/72.png') url('img/cards/81.png') url('img/cards/82.png') url('img/cards/91.png') url('img/cards/92.png') url('img/cards/101.png') url('img/cards/102.png') url('img/cards/111.png') url('img/cards/112.png') url('img/cards/121.png') url('img/cards/122.png') url('img/cats/sad1.png') url('img/cats/sad2.png') url('img/cats/sad3.png') url('img/cats/sad4.png') url('img/cats/sad5.png');
  display: none;
}

На удивление, это сработало на ipad'e.

Comments

[xmoonlight]

ну это костыль и думаю скоро прикроют тоже... :(

[littleguga]

xmoonlight: зато работает. Много что в мире построено на костылях, к сожалению.

[xmoonlight]

littleguga: ну да))) с автоплеем ютуба - там тоже с ipad-ом мучался года 2 назад.... тоже там че-та блочат след. ролик до нажатия юзером на слой PLAY....