При загрузке моего сайта измените расширение файла webp всех изображений в браузере Safari.

Question

Требуется помощь. Я пытаюсь изменить расширение для всех изображений на «png», когда мой веб-сайт загружается в браузер Safari.

Webp image path


    <img class="img-fluid" src="image/img-1.webp" alt="">
    <img class="img-fluid" src="image/img-2.webp" alt="">
    <img class="img-fluid" src="image/img-3.webp" alt="">

Я хочу изменить расширение png

    <img class="img-fluid" src="image/img-1.png" alt="">
    <img class="img-fluid" src="image/img-2.png" alt="">
    <img class="img-fluid" src="image/img-3.png" alt="">



$(document).ready(function () {

   if($.browser.safari){
    $("body").each(function(){
        var imageExtension = $("img").attr('src').split('.').pop();  
        for(var i = 0; i < $("img").length; i++)
    {
        extensionChange = imageExtension.replace(imageExtension,'.png' );
        console.log(extensionChange);
    }
    $("img").attr('src').split('.').pop();
    });
    }
});

Answer 1

вы можете сделать это без js, используйте тег <picture>, прочитайте об этом здесь: как использовать тег изображения

Answer 2

Вы должны зациклить images в body. Вы почти там немного изменили свой код.

if($.browser.safari){
    $("body img").each(function(){
    var imageExtension = $(this).attr('src').split('.').pop();  

    for(var i = 0; i < $(this).length; i++)
    {
        extensionChange = imageExtension.replace(imageExtension,'png' );
        console.log(extensionChange);
    }

    src = $(this).attr('src');
    src = src.replace(imageExtension,extensionChange);

    $(this).attr('src', src);
});
}