擬似要素のcontentに画像を指定してプリロード

画像のプリロード方法といえば、javascriptを使用してプリロードを行うのがメジャーな手法かと思うのですが、個人的には画像のプリロードのためにjavascriptを使うのは以前から大仰だなと思っていたんですよね。

で、最近CSSのみでプリロードする方法を見かけて、実際に試してみたらプリロード出来たのでご紹介したいと思います。

CSSでプリロードするコード

CSSのみでプリロードするコードは以下のとおりです。

    body:before {
      content: url(./preload_img01.png) url(./preload_img01.png);
      display: none;
    }

めちゃくちゃシンプルじゃないですか？

実はこれ、有名なjQueryプラグインである、lightboxのCSSに書いていた内容なんです。

これを見かけるまでcontentに画像を指定できるなんてことも知りませんでした…

以上

javascriptはなんでも出来て便利な分、ちょっとしたことでうまく動かなくなっちゃうので極力CSSでなんとか出来るならCSSで解決したいですよね。

以上、たにっぱでした〜