【メモ】Riot.jsのタグ内にあるモーダルウィンドウの画像をプリロード

はじめに

とあるRiot.jsを利用して定義した独自タグの中で、Bootstrapのモーダルウィンドウを呼び出す処理を書いていました。
そこで画像を動的に切り替える処理を行うのですが、画像が切り替わる際にチラつきが生じるので、これの解決に当たってみたというお話です。
なお、Riot.jsは3系統のものを使用しています。

経緯

ほとんど『はじめに』の項目で書いたことの繰り返しになってしまいますが、もう少し詳細を。
モーダルウィンドウ内は、チェックを入れたボタンに応じて表示するbackground-imageを動的に切り替えるという処理になっていたのですが、これが切り替わるときにチラついてしまっていました。
機能的にそんなに問題がある訳ではないのですが、まあ気になることは気になるので直せるものなら直したいと思い、色々調査することに。

chromeのdeveloper toolを使ってみたところ、background-imageを動的に切り替えるその瞬間にリソースを取得しているようだったので、予め画像を読み込んでおいたら良いのではと考え、とりあえず見様見真似で画像のプリロードを試みてみました。

が、確かに画像のプリロードは出来るのですが、プリロードした画像は使われず、モーダルウィンドウを開いた時、新たにbackground-imageを取得してしまうという挙動になってしまいました。

と、ここまで書いてお断りしておくのを忘れていたのですが、実装部分は厳密にいうと画像を切り替えているのではなく、クラスを切り替えるような処理になっています。
それぞれのクラスに対してSCSSのプロパティでbackground-imageに各画像のURLが値として割り振られている形ですね。
調べてみるとSCSSに記述されたbackground-imageのURLをプリロードする方法もあったので、そちらも試してみましたが状況は変わりませんでした。

（とりあえずの）解決

最終的にどういう解決をしたのかというと、独自タグ内でプリロード専用のクラスを作ってみると、モーダルウィンドウを開いても画像の再読み込みが行われなくなり、画像のチラつきがなくなりました。
HTMLはこんな感じです。超シンプルですね。

<div class="preload">
  <img src="../../../hoge.png">
  <img src="../../../huga.png">
  ...以下略...
</div>

そしてSCSSで、preloadクラスに対して画面に映らないような設定を施せばOKです。

.preload{
  opacity: 0;
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 0;
  height: 0;
}

とりあえず利用する画像の数がそんなに多くなかったのでこういう場当たり的な対応で誤魔化しましたが、消化不良感すごいですね。プリロードが出来ていないことの根本的な原因も分かってないですし……。有識者のご意見をお伺いしたいところ。