Замена изображения jpg на webp в слайдере
Подскажите пожалуйста как я могу изменить url для каждой картинки слайдера. Кроме как document.querySelector('.slide-image').style.backgroundImage.replace("jpg", 'webp') ничего в голову не приходит и не работает
function testWebP(callback) { var webP = new Image(); webP.onload = webP.onerror = function () { callback(webP.height === 2); }; webP.src = "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA"; } testWebP(function (support) { if (support === true) { document.querySelector('body').classList.add('webp'); document.querySelector('.slide-image').style.backgroundImage.replace("jpg", 'webp'); }else{ document.querySelector('body').classList.add('no-webp'); } }); |
Попробуйте заменить 13-ю строку на это:
var style = document.querySelector('.slide-image').style; style.backgroundImage = style.backgroundImage.replace("jpg", 'webp'); |
Немного отдохнув мозгами вот что получаеться
function testWebP(callback) { var webP = new Image(); webP.onload = webP.onerror = function () { callback(webP.height === 2); }; webP.src = "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA"; } testWebP(function (support) { if (support === true) { document.querySelector('body').classList.add('webp'); let sliderArray = document.getElementsByClassName('slide-image'); for (let i = 0; i < sliderArray.length; i++) { let sliderImage = sliderArray[i].style.backgroundImage.replace("jpg", 'webp'); let result = sliderArray[i].style.backgroundImage = sliderImage; console.log(result); } }else{ document.querySelector('body').classList.add('no-webp'); } }); работает для слайдера но хотел бы расширить возможность замена других расширений например let sliderImage = sliderArray[i].style.backgroundImage.replace("jpg" || 'png', 'webp'); Как думаете? |
Вот так вот работает но если кто-то знает как лучше сделать буду признателен
replace(/(png|jpg)/, 'webp') |
Помогите пожалуйста сделать регуляргое выражение чтобы убрать это - url()
let sliderArray = $('div[style*="background-image"]').toArray(); for (let i = 0; i < sliderArray.length; i++) { let sliderImg = sliderArray[i].style.backgroundImage.replace(/(png|jpg)/, 'webp'); let regexp = sliderImg.replace('url', ''); regexp = regexp.replace('(', ''); regexp = regexp.replace(')', ''); regexp = regexp.replace(/"/g, ''); let img = new Image(); img.src = regexp; img.onload = function(){sliderArray[i].style.backgroundImage = sliderImg}; } |
alert('url(/path/to/file.jpg)'.replace(/url\(([^\)]+?)\)/gim, '$1')); |
Часовой пояс GMT +3, время: 11:41. |