昨日作った高画質ボタンですが、もう少し改善の余地がある気がして再び取り組んでみました。
今回はphpを使って条件分岐させるので、画像が余計に読まれる事はありませんので良いと思ったのですが・・・
広告
jquery.cookie.jsとphpを使って高画質モードを表示させる
昨日の続きなので、主な内容は省きます。
昨日の内容はJSで条件判定した内容でしたが、今回は同様の処理をphpで実行する方法です。
まずは、jquery.cookie.jsを使ってクッキーを作ります。
$('#imgswitch').click(function(){ $.cookie("imgswitch", "on", { expires:1,path:'/' }); }); $('#imgswitch0ff').click(function(){ $.cookie("imgswitch", "on", { expires:-1,path:'/' }); });
スイッチオンでクッキー発生。オフでクッキー削除。
後はクッキーで条件判定です。
<?php if (isset($_COOKIE["imgswitch"])): ?> 高画質用の画像(srcsetも含ませると良いと思う 特に3x) <?php else: ?> 普通の画像 <?php endif; ?>
コレをモバイル判定と組み合わせれば、クッキーがあった時に高画質用の画像だけを出力出来るので、余計な画像を読み込ませずに済むワケですが、どうも今使っているサーバーではphpで分岐させたほうが表示が遅くなりましたので、一部を除きやめました。
恐らく条件分岐を複数作ってしまい処理が遅くなったのでしょう。プログラムである事を実感しました。
ただ、高スペックなサーバーならphpで条件分岐させたほうがユーザーフレンドリーだと思います。
ちなみに、phpのみでもクッキーは作れますのでphpでクッキーが作れる状態なら、jsは使わないでphpのみで実行させたほうが良いかも知れません。
おすすめのコンテンツ
広告