Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Повторная загрузка спрайта при ошибке подключения к нему (https://javascript.ru/forum/events/81119-povtornaya-zagruzka-sprajjta-pri-oshibke-podklyucheniya-k-nemu.html)

ildarmustafin 03.10.2020 18:38

Повторная загрузка спрайта при ошибке подключения к нему
 
Добрый день уважаемые форумчане. Прошу подсказать или на направить меня нужное направление.В 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;
}

рони 03.10.2020 19:01

ildarmustafin,
может создать картинку и проверять на ней наличие спрайта?

ildarmustafin 03.10.2020 19:08

а после проверки на наличие спрайта как подключить ее в background-image в css? Я смотрю в что-то похожее. Это создание новой картинки с указанием src="путь к спрайту"и обработки Onerror этой картинки. Только как потом подключать эту картинку в css?

рони 03.10.2020 20:11

Цитата:

Сообщение от ildarmustafin
Только как потом подключать эту картинку в css?

браузер сам подключит, если прописано свойство в css.

ildarmustafin 03.10.2020 20:33

Иногда бывает так, что этот спрайт не подключается по таймауту. Все таймауты подключения js и css я обрабатываю и отправляю на повторное подключение. Но не могу это сделать со спрайтом и получается так что в итоге все загружается кроме иконок спрайта.

рони 03.10.2020 20:36

ildarmustafin,
танец с бубнами, если спрайт загрузился, запросите размер любого элемента на на странице, браузер пересчитает css.

рони 03.10.2020 20:41

ildarmustafin,
или как вариант при загрузке устанавливать нужный параметр css.

ildarmustafin 03.10.2020 20:43

А если спрайт не загрузился?

рони 03.10.2020 20:46

Цитата:

Сообщение от ildarmustafin
А если спрайт не загрузился?

вам решать что делать, до победного грузить или ограничить число попыток, или использовать другие ссылки.

ildarmustafin 03.10.2020 20:48

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


Часовой пояс GMT +3, время: 12:23.