• Facebook
  • Twitter
  • RSS

月別

コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン

2016/03/07

書いた人:
tanippa!
カテゴリ:
CSS
1,937 views

画像のプリロード方法といえば、javascriptを使用してプリロードを行うのがメジャーな手法かと思います。ところが、最近CSSのみでプリロードする方法を見かけて、実際に試してみたらプリロード出来たのでご紹介したいと思います。

擬似要素の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で解決したいですよね。

以上、たにっぱでした〜


この記事を読んだ人はこんな記事も読んでいます

<

>