Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.03.2019, 15:23
DVV DVV вне форума
Аспирант
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 61

Скрипт не работает только в IE11
Написал скрипт для определения поддержки браузером формата изображений webP и ретины и замены ссылок фоновых картинок на соответствующие возможностям текущего браузера и экрана устройства. Во все браузерах, кроме IE, он работает. Не могу понять, почему в консоль IE выводится проверка, что он не поддерживает формат webP, но скрипт почему то все равно вставляет ссылки на webp картинки. В результате фоновых картинок не видно.
Залил сайт на гитхаб https://viacheslavdemchenko.github.io/ribberg/

Сам скрипт вот:

(function (){

/* Browser webP support check */
    function testWebP(callback) {
        let webP = new Image();     
            webP.src = 'data:image/webp;base64,UklGRi4AAABXRUJQVlA4TCEAAAAvAUAAEB8wAiMw' +  'AgSSNtse/cXjxyCCmrYNWPwmHRH9jwMA';
            
        webP.onload = webP.onerror = () => {
            callback(webP.height === 2);     
        }; 
    };
    
    let browser;

    testWebP(function(supported) {
        if (supported) {
            browser = true;
            console.log('Поддерживает webp');
        	return browser
        } else {
            browser = false;
            console.log('Не поддерживает webp');
        	return browser
        }
    });

/* Supported image type choice options */
    const bgImgOpt = {
    	images: 'bg-img',  // Класс элементов, в которых необходима замена картинок
        prevUrlEnd: '@1x.jpg', // Основной (jpg) формат картинок
        urlWebp1x: '@1x.webp', // WebP формат картинок для обычных экранов
        urlWebp2x: '@2x.webp', // WebP формат картинок для экранов с разрешением от 1.5 DPI
        urlJpg2x: '@2x.jpg', // Jpg формат картинок для экранов с разрешением от 1.5 DPI
    }

/* Функция выбора формата фоновых картинок в зависимости от типа браузера и разрешения экрана */
    function imageTypeChange(images, urlWebp1x, urlWebp2x, urlJpg2x, prevUrlEnd) {

            // Псевдомассив элементов с фоновыми картинками
    	let bgImages = document.querySelectorAll(`.${images}`), 
    	    // Проверка DPI экрана устройства для всех браузеров и для IE 10
    	    pixelRatio = window.devicePixelRatio || window.screen.deviceXDPI / window.screen.logicalXDPI,
    	    imageList, // Список текущих ссылок на фоновые картинки
            currentImage, // Текущая картинка
            newURL, // Новая ссылка для картинки   
            pureUrl; // Чистая ссылка без url, кавычек и скобок

        // Перебор псевдомассива элементов с фоновыми картинками
        for (let i = 0; i < bgImages.length; i++) {
        	// Формирование списка текущих ссылок на картинки для IE и остальных браузеров
            imageList = bgImages[i].currentStyle || window.getComputedStyle(bgImages[i], false);
            // Выбор текущей ссылки на картинку из списка
            currentImage = imageList.backgroundImage;
            // Вырезание лишних символов и получение чистой ссылки
            pureUrl = currentImage.replace(/"/g, '').replace(/\(/g, '').replace(/\)/g, '').replace(/url/g, '');

                // Определение ссылок на картинки формата webP для обычных экранов
                if (testWebP && pixelRatio === 1) { 
                   newURL = pureUrl.replace(/@1x.jpg/g, urlWebp1x);
                // Определение ссылок на картинки формата webP для экранов с разрешением более 1.5 DPI
                } else if (testWebP && pixelRatio > 1.5) {
                   newURL = pureUrl.replace(/@1x.jpg/g, urlWebp2x);
                // Определение ссылок на картинки формата jpg для экранов с разрешением более 1.5 DPI
                } else if (!testWebP && pixelRatio > 1.5) {
                   newURL = pureUrl.replace(/@1x.jpg/g, urlJpg2x);
                // Определение ссылок на картинки формата jpg для обычных экранов
                } else if (!testWebP && pixelRatio === 1){
                   newURL = pureUrl.replace(/@1x.jpg/g, prevUrlEnd);
                }
        
            bgImages[i].style.backgroundImage = `url(${newURL})`; // Установка новых ссылок
        }
    }
    imageTypeChange(bgImgOpt.images, bgImgOpt.urlWebp1x, bgImgOpt.urlWebp2x, 
    	           bgImgOpt.urlJpg2x, bgImgOpt.prevUrlEnd);

})();
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Cкрипт javascript работает только после того, как курсор в адресную строку qwaker Элементы интерфейса 4 25.04.2014 16:04
Скрипт не работает только в Firefox. В остальных браузерах все ОК. Dinamitt Firefox/Mozilla 1 28.06.2013 14:29
Почему скрипт работает только в Опере? evgenij-1963 (X)HTML/CSS 6 23.03.2013 15:14
Скрипт работает только в Mazilla Pashok Ваши сайты и скрипты 3 26.01.2013 21:09
Почему скрипт не работает с данными, которые вернул другой скрипт? Rooner jQuery 3 20.09.2012 13:56