如果用户代理是 iOS，则通过 javascript 设置 img data-srcset 不起作用

Question

由于 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 用户提供回退？

Answer 1

使用 modernizr webp 检查器修复了它：

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');
}
});

如果用户代理是 iOS，则通过 javascript 设置 img data-srcset 不起作用

set img data-srcset via javascript if useragent is iOS does not work

javascript

html

ios

safari

webp