Поэтому мне нужно определить поддержку webp, используя модернизатор, а затем выполнить некоторую обработку в PHP в зависимости от результата результата.
Сначала я подумал, что могу установить cookie и получить cookie, используя PHP следующим образом:
JS:
Modernizr.on('webp', function (result) {
if (result) {
setCookie("webpissupported", "yes", "365");
}
});
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
PHP:
$userAvatar = um_get_avatar_uri( um_profile('profile_photo'), 190 );
$patterns = array("/.jpg/", "/.jpeg/", "/.png/");
if (isset($_COOKIE['webpsupport']))
$userAvatar = preg_replace($patterns, "_result.webp", $userAvatar);
Теперь проблема с приведенным выше кодом заключается в том, что я использую общий кеш wordpress plugin w3 с включенным кешем страниц. это вызывает кеширование куки и приводит к неожиданным результатам.
Тогда я подумал, что, может быть, я мог бы сделать что-то вроде этого:
<script type="text/javascript">
Modernizr.on("webp", function (result) {
if (result) {
<?php $webpSupport = true; ?>
}
});
</script>
Но это не сработает.
Кто-нибудь знает, как я могу обойти эту проблему.
Вы смешали (клиентскую) обработку на стороне браузера с серверной (PHP). В вашем примере блок кода PHP должен выполняться независимо от того, что должно быть обработано позже браузером / JS (или не будет вообще, в случае отсутствия JS
браузер). Так, $webpSupport
переменная в этом случае и пример должны соответствовать тому, что вы назначаете ей в порядке сверху вниз.
Один из способов добиться того, что вам нужно — это установить JS cookie, setCookie("webpissupported", "yes", "365");
и на следующей странице просмотра прочитайте $_COOKIE['webpissupported']
и подавать изображения в соответствии с этим.
Помните, webp
не является стандартом, хотя присутствует в 72,85% браузеров по данным caniuse.com / StatCounter. Вы должны использовать это как прогрессивное улучшение.
Других решений пока нет …