Показать сообщение отдельно
  #5 (permalink)  
Старый 10.05.2019, 22:20
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,713

Сообщение от biryukovm
img_dostyp = '';
Зачем вам подмена типов? В чём прикол изменения представителя класса HTMLImageElement на представителя класса String?

Вы можете использовать только стили (ошибки в консоли остаются) для того, чтобы изменить вид сломанной картинки... (Почему бы сразу не писать src вместо avatar-src?)
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width">
	</head>
	<body style="max-width: 500px; margin: auto;">
		<img src="https://picsum.photos/id/1014/100/100">
		<img src="https://picsum.photos/id/1027/100/100">
		<img src="https://picsum.photos/id/203/100/100">
		<img src="https://picsum.photos/id/error-1">
		<img src="https://picsum.photos/id/319/100/100">
		<img src="https://picsum.photos/id/error-2">
		<img src="https://picsum.photos/id/259/100/100">
		<img src="https://picsum.photos/id/error-3">
		<img src="https://picsum/error-4/">
		<img src="https://picsum.photos/id/334/100/100">
		<img src="https://picsum.photos/id/775/100/100">
		<img src="https://picsum.photos/id/777/100/100">
		
		<style>
		
img {
	position: relative;
	width: 100px;
	height: 100px;
}

img::before {
	content: url("https://picsum.photos/id/669/100/100");
	position: absolute;
}
		
		</style>
	</body>
</html>


Если вам не нужны, ошибки в консоли, то вы можете использовать Service Worker... вот код sw.js
addEventListener("fetch", event => {
	if(event.request.destination === "image") {
		event.respondWith(
			fetch(event.request.url)
				.then(response => response.ok ? response : Promise.reject())
				.catch(() => fetch("https://picsum.photos/id/669/100/100"))
		);
	}
});
Если загружается ресурс для картинки, то в случае удачного скачивания им и ответим, в противном случае сделаем запрос для замещающей картинки.

Вот его регистрация... (app.js)
const scriptURL = new URL("sw.js", location);

const scriptURLHasRegistered = navigator.serviceWorker.getRegistrations().then(registrations => {
	for(const { active } of registrations)
		if(active.scriptURL === scriptURL.href) return true;

	return false;
});

navigator.serviceWorker
	.register(scriptURL)
	.then(() => scriptURLHasRegistered)
	.then(ok => { if(!ok) location.reload(); })
;


Поскольку картинки начинают загружаться раньше, чем успеет установиться SW, то мы перезагружаем страницу, чтобы все URL прошли через SW, когда он уже установлен!

Вот код целиком... https://plnkr.co/edit/JtPlmS4TcP4JpnYdBCde?p=preview
Ответить с цитированием