Как проще предзагружать картинки для css анимации?

Question

[serg_nik]

Чтобы избежать асинхрона при старте цельной анимации, я использую метод предзагрузки графония силами js. После полной загрузки картинок меняю класс у основного дивака className=animate

<div id="wrapper">
 <div class="bg_main1"></div>
 <div class="bg_main2"></div>
</div>

.bg_main1 {
 opacity: 0;
 background-image: url('bg1.jpg');
}

.bg_main2 {
 opacity: 0;
 background-image: url('bg2.jpg');
}


.animate {
 .bg_main1 {
    animation: bg_main1 3s linear 0s 1;
    @keyframes bg_main1 {
       0% { opacity: 0 }
       100% { opacity: 1 }
    }
 }
 .bg_main2 {
    animation: bg_main2 3s linear 0s 1;
    @keyframes bg_main2 {
       0% { opacity: 0 }
       100% { opacity: 1 }
    }
 }
}

Пока что это единственный вариант который работает (проверял на 2G скоростях интернета).

Вопрос: есть ли вариант короче и проще?

Comments

[kulaeff]

Нетуть.