Повторная загрузка спрайта при ошибке подключения к нему
Добрый день уважаемые форумчане. Прошу подсказать или на направить меня нужное направление.В 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;
}
|
ildarmustafin,
может создать картинку и проверять на ней наличие спрайта? |
а после проверки на наличие спрайта как подключить ее в background-image в css? Я смотрю в что-то похожее. Это создание новой картинки с указанием src="путь к спрайту"и обработки Onerror этой картинки. Только как потом подключать эту картинку в css?
|
Цитата:
|
Иногда бывает так, что этот спрайт не подключается по таймауту. Все таймауты подключения js и css я обрабатываю и отправляю на повторное подключение. Но не могу это сделать со спрайтом и получается так что в итоге все загружается кроме иконок спрайта.
|
ildarmustafin,
танец с бубнами, если спрайт загрузился, запросите размер любого элемента на на странице, браузер пересчитает css. |
ildarmustafin,
или как вариант при загрузке устанавливать нужный параметр css. |
А если спрайт не загрузился?
|
Цитата:
|
Вот вот, вот это мне и нужно. Только как это сделать?
|
Как раз грузить до победного мой вариант
|
Цитата:
Цитата:
Цитата:
load ура добавить правило или запросить размер |
загрузка картинки до победного
ildarmustafin,
в примере 5 первых попыток с ошибкой, повтор загрузки через 1 секунду.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.temp {
height: 32px;
width: 32px;
background-position: 0 -34px;
text-decoration: none;
background-color: transparent;
background-image: var(--img, url(images/css_sprites.png));
margin: 3px;
display: inline-block;
}
</style>
</head>
<body>
<div class="temp"></div>
<div class="temp"></div>
<div class="temp"></div>
<div class="temp"></div>
<div class="temp"></div>
<script>
let k = 5;
const loadSrc = (src, delay) => {
const img = new Image();
img.src = k-- > 0 ? "" : src; //img.src = src;
img.decode()
.then(() => {
document.body.style.setProperty('--img', `url(${src})`);
})
.catch(() => {
console.log(k)
setTimeout(() => loadSrc(src, delay), delay)
})
}
loadSrc(\'https://javascript.ru/forum/images/smilies/smile.gif\', 1000)
</script>
</body>
</html>
|
Все четко работает. Благодарю Вас. + в карму
|
| Часовой пояс GMT +3, время: 04:59. |