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