*当サイトのリンクにはAmazonアソシエイトやアフィリエイトリンクが含まれております。

クッキーとphpを使って高精度ディスプレイ用の画像の分岐

昨日作った高画質ボタンですが、もう少し改善の余地がある気がして再び取り組んでみました。
今回は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のみで実行させたほうが良いかも知れません。


おすすめのコンテンツ

広告

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください