画像の表示速度が遅かったので、さらに軽くするために拡張子をWebPに変更することにしました。
背景画像をWebPで表示するにあたりプラグインを入れたのですが、既存のソースとの兼ね合いでつまづいたのでメモに残しておきます。
背景画像のWebP表示前提
- jQueryを読み込んでおく
- jsプラグイン「Modernizr」からWebPのプラグインをDLして読み込んでおく
プラグインのダウンロード方法
- Add your detectsをクリック
- Webpの＋をクリック
- BUILDをクリック
- Downloadをクリック
ダウンロードしたら任意の場所に保存して、読み込んでおきます。
<script src="js/modernizr_custom.js"></script>きちんと機能していれば、WebP対応ブラウザで表示した場合、html要素にwebpというクラスが付与されているはずです。
背景画像をWebPで表示する
で、ここからが本題。
単純にCSSで書き換えられれば良かったんですが、今回は各ページのアイキャッチ画像のファイル名を、PHPの変数に格納していたためうまくいかず……。
もっと簡単にやる方法もあるかもしれませんが、今回はJavaScriptでやってみました。
<script type="text/javascript">
window.onload = function(){
var bg = document.getElementsByClassName('bg');
var webp = $('html').hasClass('webp');
var bgimg = '<?php echo $featured_image; ?>';
if (webp) {
bg[0].style.backgroundImage = 'url(' + bgimg + '.webp)';
} else {
bg[0].style.backgroundImage = 'url(' + bgimg + '.jpg)';
}
}
</script>※$featured_imageに表示する背景画像の拡張子を除いたファイル名を入れています。
ポイントは①modernizrがwebpクラスを付与した後に処理を実行すること、②getElementsByClassNameメソッドはHTMLCollectionで返ってくるということです。
最初に書いたソース
<script type="text/javascript">
var webp = $('html').hasClass('webp');
var bgimg = '<?php echo $featured_image; ?>';
if (webp) {
bg.style.backgroundImage = 'url(' + bgimg + '.webp)';
} else {
bg.style.backgroundImage = 'url(' + bgimg + '.jpg)';
}
</script>うまくいかなかったので、コンソールログにwebpを出してみました(console.log(webp);)
そもそもconsole.log(webp);がfalseになってるorz
原因はwebpクラスが追加される前にhasClassの処理を実行しているせいでした。
すごく凡ミス。というわけで下記のように変更。
<script type="text/javascript">
window.onload = function(){
var bg = document.getElementsByClassName('bg');
var webp = $('html').hasClass('webp');
var bgimg = '<?php echo $featured_image; ?>';
if (webp) {
bg.style.backgroundImage = 'url(' + bgimg + '.webp)';
} else {
bg.style.backgroundImage = 'url(' + bgimg + '.jpg)';
}
}
</script>これでwebpクラスが追加された後にhasClassが実行されるのでtrueが返ってくるようになりました。
だがしかし背景画像が表示されない……！
結論
色々調べていたらgetElementsByClassNameメソッドはHTMLCollectionという配列のようなものを返すそうです。なので、上記のソースだとbgっていう名前のクラスがついてる要素なのはわかったけど、bgクラスがついてるやつの中のどれ？となっていたみたい。というわけで、今回はどのページも背景画像は1枚でlengthは1なので、bgの後に[0]を足して下記のソースになりました。
<script type="text/javascript">
window.onload = function(){
var bg = document.getElementsByClassName('bg');
var webp = $('html').hasClass('webp');
var bgimg = '<?php echo $featured_image; ?>';
if (webp) {
bg[0].style.backgroundImage = 'url(' + bgimg + '.webp)';
} else {
bg[0].style.backgroundImage = 'url(' + bgimg + '.jpg)';
}
}
</script>今回は確実にlengthが1なので[0]にしていますが、$featured_imageも配列に入れて繰り返しにした方が汎用性があっていいんじゃないかなと思います。
コメント