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

Question

Since the Safari browser doesn't support .webp images, I need to create a fallback, so if the useragent is iOS, then load .jpg instead of .webp. I have a img in a figure like this:

<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>

the onerror way doesn't work. So what I also tried now:

<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>

That also does not work. The image does exist and the alert() get's triggered. What am I doing wrong? What can I do in order to have a fallback for the iPhone users that can't load .webp images?

Answer 1

Fixed it by using 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');
}
});