Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Проверка картинки SRC (https://javascript.ru/forum/events/77469-proverka-kartinki-src.html)

biryukovm 10.05.2019 01:26

Проверка картинки SRC
 
Привет всем.
Я на сайте настраивал обработчик проверки доступности картинки, реализовать обработку через сервер задача оказалась по времени много занимающая, поэтому пришло на ум использовать JS чтоб клиент сам дергал что надо, а страница уже была загружена.

Так вот перейдем к делу.

Я прописал следующее
<img  avatar-src="'.$row['avatar'].'" alt="'.$row['avatar'].'" />


и к нему JS
[].forEach.call(document.querySelectorAll('img[avatar-src]'), function(img) {
var img_dostyp = new Image();
img_dostyp.src = img.getAttribute('avatar-src');
img_dostyp.onerror = function(){
    img.setAttribute('src', '/img/style/avatar.jpg');
    img.removeAttribute('avatar-src');
};
img_dostyp.onload = function(){
    img.setAttribute('src', img.getAttribute('avatar-src'));
    img.removeAttribute('avatar-src');
};

img_dostyp = '';
});


Собственно код работает к нему вопросов нет все заменяет как надо, но вот в консоли отображается каждая ссылка картинки которой нету (хотя я заменил на заглушку и она отображается).

Что мне делать с консолью и как сделать так что там не выходил список этих картинок?

рони 10.05.2019 10:22

Цитата:

Сообщение от biryukovm
в консоли отображается каждая ссылка картинки которой нету

почему это вас беспокоит?

biryukovm 10.05.2019 11:37

Цитата:

Сообщение от рони (Сообщение 507537)
почему это вас беспокоит?

Потому что хочется по уму и чтоб консоль была без ошибок :)

рони 10.05.2019 15:07

Цитата:

Сообщение от biryukovm
чтоб консоль была без ошибок

можно отключить консоль, но зачем?

Malleys 10.05.2019 21:20

Цитата:

Сообщение от 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

рони 10.05.2019 21:47

Malleys,
:thanks:

Vlasenko Fedor 10.05.2019 22:39

Цитата:

Сообщение от biryukovm
реализовать обработку через сервер задача оказалась по времени много занимающая

научитесь гуглить (htaccess default image) или nginx
Цитата:

Сообщение от biryukovm
пришло на ум использовать JS чтоб клиент сам дергал что надо

решение через задний проход
у сервера спрашиваете пусть он и отдает
Apache .htaccess
Код:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_URI} \.(gif|jpg|jpeg|png)$
        RewriteRule .* noimage.jpg [L]       
</IfModule>

последние версии nginx поддерживают js
http://nginx.org/ru/docs/njs/index.html


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