Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.07.2020, 21:16
Новичок на форуме
Отправить личное сообщение для Tolik003 Посмотреть профиль Найти все сообщения от Tolik003
 
Регистрация: 22.07.2020
Сообщений: 4

Замена изображения 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');
    }
});
Ответить с цитированием
  #2 (permalink)  
Старый 22.07.2020, 21:49
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,245

Попробуйте заменить 13-ю строку на это:
var style = document.querySelector('.slide-image').style;
style.backgroundImage = style.backgroundImage.replace("jpg", 'webp');
Ответить с цитированием
  #3 (permalink)  
Старый 22.07.2020, 22:55
Новичок на форуме
Отправить личное сообщение для Tolik003 Посмотреть профиль Найти все сообщения от Tolik003
 
Регистрация: 22.07.2020
Сообщений: 4

Немного отдохнув мозгами вот что получаеться
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'); Как думаете?
Ответить с цитированием
  #4 (permalink)  
Старый 22.07.2020, 23:37
Новичок на форуме
Отправить личное сообщение для Tolik003 Посмотреть профиль Найти все сообщения от Tolik003
 
Регистрация: 22.07.2020
Сообщений: 4

Вот так вот работает но если кто-то знает как лучше сделать буду признателен
replace(/(png|jpg)/, 'webp')
Ответить с цитированием
  #5 (permalink)  
Старый 23.07.2020, 19:28
Новичок на форуме
Отправить личное сообщение для Tolik003 Посмотреть профиль Найти все сообщения от Tolik003
 
Регистрация: 22.07.2020
Сообщений: 4

Помогите пожалуйста сделать регуляргое выражение чтобы убрать это - 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};
        }
Ответить с цитированием
  #6 (permalink)  
Старый 23.07.2020, 21:32
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,245

alert('url(/path/to/file.jpg)'.replace(/url\(([^\)]+?)\)/gim, '$1'));
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена изображения в слайдере при клике на картинку. Anelya9685 Элементы интерфейса 0 27.01.2017 22:57
Замена изображения Grass556 Javascript под браузер 1 09.07.2014 06:44
Замена изображения zarobo1 Общие вопросы Javascript 1 30.08.2013 07:59
Замена изображения на время прогрузки WebQuad Общие вопросы Javascript 1 29.12.2012 06:01
Замена изображения с помощью onMouseOver House M.D. Events/DOM/Window 4 02.06.2009 22:14