Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.10.2020, 17:38
Интересующийся
Отправить личное сообщение для ildarmustafin Посмотреть профиль Найти все сообщения от ildarmustafin
 
Регистрация: 02.10.2020
Сообщений: 15

Повторная загрузка спрайта при ошибке подключения к нему
Добрый день уважаемые форумчане. Прошу подсказать или на направить меня нужное направление.В html файле веб-сервера делаю подключение js и css. При ошибке подключения происходит повторное подключение js и css. Все работает как мне нужно. Но у меня не получается сделать повторную загрузку спрайта(css_sprites.png завязан на иконки) при onerror. Спрайт css_sprites.png загружается в css в background-image.
<!doctype html>
<html lang="ru">

<head>
    <script>
        function reopenJS(scriptPath) {
            let script = document.createElement('script');
            script.src = scriptPath;
            document.head.append(script);
            script.onerror = function() {
                reopenJS(scriptPath);
            }
        }
    </script>
    <link rel="stylesheet" type="text/css" href="style.css" onerror="reopenJS('style.css');">
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css" onerror="reopenJS('bootstrap.min.css');">
    <script src="chartist.min.js" charset="utf-8" onerror="reopenJS('chartist.min.js');"></script>
    <script src="functions.js" onerror="reopenJS('functions.js');"></script>
</head>

В файле functions.js скрипты открываются как:
function openSchedule() {
    event.preventDefault();
    let xhttp = new XMLHttpRequest();
    xhttp.open("GET", 'config.json', true);
    xhttp.timeout = 10000;
    xhttp.ontimeout = function(e) {
        console.log("[TIMEOUT] OpenSchedule");
        openSchedule();
    };
    xhttp.onerror = function() {
        console.log("[ERROR] Reopen OpenSchedule");
        openSchedule();
    };
    xhttp.onabort = function() {
        console.log("[ABORT] OpenSchedule");
    };
    xhttp.onload = function() {
        if (this.readyState == 4 && this.status == 200) {
            ...
        };
        xhttp.send();
    }

Файл CSS:
.temp {
    height: 32px;
    width: 32px;
    background-position: 0 -34px;
    text-decoration: none;
    background-color: transparent;
    background-image: url(images/css_sprites.png);
    margin: 3px;
    display: inline-block;
}
Ответить с цитированием
  #2 (permalink)  
Старый 03.10.2020, 18:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

ildarmustafin,
может создать картинку и проверять на ней наличие спрайта?
Ответить с цитированием
  #3 (permalink)  
Старый 03.10.2020, 18:08
Интересующийся
Отправить личное сообщение для ildarmustafin Посмотреть профиль Найти все сообщения от ildarmustafin
 
Регистрация: 02.10.2020
Сообщений: 15

а после проверки на наличие спрайта как подключить ее в background-image в css? Я смотрю в что-то похожее. Это создание новой картинки с указанием src="путь к спрайту"и обработки Onerror этой картинки. Только как потом подключать эту картинку в css?
Ответить с цитированием
  #4 (permalink)  
Старый 03.10.2020, 19:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

Сообщение от ildarmustafin
Только как потом подключать эту картинку в css?
браузер сам подключит, если прописано свойство в css.
Ответить с цитированием
  #5 (permalink)  
Старый 03.10.2020, 19:33
Интересующийся
Отправить личное сообщение для ildarmustafin Посмотреть профиль Найти все сообщения от ildarmustafin
 
Регистрация: 02.10.2020
Сообщений: 15

Иногда бывает так, что этот спрайт не подключается по таймауту. Все таймауты подключения js и css я обрабатываю и отправляю на повторное подключение. Но не могу это сделать со спрайтом и получается так что в итоге все загружается кроме иконок спрайта.
Ответить с цитированием
  #6 (permalink)  
Старый 03.10.2020, 19:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

ildarmustafin,
танец с бубнами, если спрайт загрузился, запросите размер любого элемента на на странице, браузер пересчитает css.
Ответить с цитированием
  #7 (permalink)  
Старый 03.10.2020, 19:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

ildarmustafin,
или как вариант при загрузке устанавливать нужный параметр css.
Ответить с цитированием
  #8 (permalink)  
Старый 03.10.2020, 19:43
Интересующийся
Отправить личное сообщение для ildarmustafin Посмотреть профиль Найти все сообщения от ildarmustafin
 
Регистрация: 02.10.2020
Сообщений: 15

А если спрайт не загрузился?
Ответить с цитированием
  #9 (permalink)  
Старый 03.10.2020, 19:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

Сообщение от ildarmustafin
А если спрайт не загрузился?
вам решать что делать, до победного грузить или ограничить число попыток, или использовать другие ссылки.
Ответить с цитированием
  #10 (permalink)  
Старый 03.10.2020, 19:48
Интересующийся
Отправить личное сообщение для ildarmustafin Посмотреть профиль Найти все сообщения от ildarmustafin
 
Регистрация: 02.10.2020
Сообщений: 15

Вот вот, вот это мне и нужно. Только как это сделать?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как получить сообщение об ошибке при загрузке изображения? wild_snail Общие вопросы Javascript 2 05.04.2012 12:23
Загрузка файла при помощи .post abr_question jQuery 3 11.11.2011 09:29
Загрузка фото на сарвер при помощи AJAX shilinpavel AJAX и COMET 3 22.09.2011 12:22
Загрузка счетчика при редиректе Johny Общие вопросы Javascript 6 31.08.2010 20:19
Можно ли отключить остановку javascript при ошибке в IE6 ? limonad Internet Explorer 0 28.01.2010 18:04