如果 useragent 是 iOS，则通过 javascript 设置 img data-srcset 不起作用答案

【问题标题】：set img data-srcset via javascript if useragent is iOS does not work如果 useragent 是 iOS，则通过 javascript 设置 img data-srcset 不起作用
【发布时间】：2020-05-17 19:43:05
【问题描述】：

由于 Safari 浏览器不支持 .webp 图像，我需要创建一个后备，因此如果用户代理是 iOS，则加载 .jpg 而不是 .webp。我有一个 img 是这样的：

<figure>
    <img
    sizes="(max-width: 940px) 100vw, 940px"
    data-srcset="
    assets/demo/misc/parallax-img-1_tdief1_c_scale,w_200.webp 200w,
    assets/demo/misc/parallax-img-1_tdief1_c_scale,w_321.webp 321w,
    assets/demo/misc/parallax-img-1_tdief1_c_scale,w_419.webp 419w,
    assets/demo/misc/parallax-img-1_tdief1_c_scale,w_505.webp 505w,
    assets/demo/misc/parallax-img-1_tdief1_c_scale,w_580.webp 580w,
    assets/demo/misc/parallax-img-1_tdief1_c_scale,w_653.webp 653w,
    assets/demo/misc/parallax-img-1_tdief1_c_scale,w_940.webp 940w"
    data-src="assets/demo/misc/parallax-img-1_tdief1_c_scale,w_940.webp"
    alt="Good Design" class="lazyload" id="parallax-img-1" onerror="this.onerror=null; this.src='assets/demo/misc/parallax-img-1.jpg'">
</figure>

onerror 方法不起作用。所以我现在也尝试了：

<script>
let iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
let parallaximg1 = document.getElementById('parallax-img-1');
if (iOS) {
    alert("ios!");
    parallaximg1.srcset = "assets/demo/misc/parallax-img-1.jpg";
}
</script>

这也行不通。图像确实存在，并且触发了 alert() 。我究竟做错了什么？我该怎么做才能为无法加载 .webp 图像的 iPhone 用户提供后备方案？

【问题讨论】：

你应该detect features 而不是浏览器。

标签： javascript html ios safari webp

【解决方案1】：

使用modernizr webp checker修复它：

let parallax_img_1 = document.getElementById('parallax-img-1');
Modernizr.on('webp', function (result) {
// `result == Modernizr.webp`
console.log(result);  // either `true` or `false`
if (result) {
    // all good
}
else {

    parallax_img_1.setAttribute('data-srcset', 'assets/demo/misc/parallax-img-1.jpg');
}
});

【讨论】：