So you need to pre-load images, but don’t want to deal with javascript or complicated workarounds. What do you do? The solution is simple. All we need to do is designate a CSS style with multiple background-images. As your browser reads the style, it will load each image you designate in succession, thus pre-loading your images. Below is an example of the CSS:

JavaScriptなしに、CSSだけで画像をブラウザにプリロードさせるテクニック。
まず、次のようなCSSを定義します。

#preloadedImages {
       width: 0px;
       height: 0px;
       display: inline;
       background-image: url(path/to/image1.png); /* 読ませたいイメージ1 */
       background-image: url(path/to/image2.png); /* 読ませたいイメージ2 */
       background-image: url(path/to/image3.png); /* 読ませたいイメージ3 */
       background-image: url(path/to/image4.png); /* 読ませたいイメージ4 */
}

そして、次のようなタグをHTMLに記述しておく。

<div id="preloadedImages">< /div>

これだけでOK。
なるほど、divを読み込んだ時点でブラウザが画像を読み込みに行ってキャッシュしてくれるわけですね。

JavaScriptで面倒なことをせずに済みます。