Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.05.2019, 02:26
Кандидат Javascript-наук
Отправить личное сообщение для biryukovm Посмотреть профиль Найти все сообщения от biryukovm
 
Регистрация: 13.12.2013
Сообщений: 106

Проверка картинки 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 = '';
});


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

Что мне делать с консолью и как сделать так что там не выходил список этих картинок?
Ответить с цитированием
  #2 (permalink)  
Старый 10.05.2019, 11:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,157

Сообщение от biryukovm
в консоли отображается каждая ссылка картинки которой нету
почему это вас беспокоит?
Ответить с цитированием
  #3 (permalink)  
Старый 10.05.2019, 12:37
Кандидат Javascript-наук
Отправить личное сообщение для biryukovm Посмотреть профиль Найти все сообщения от biryukovm
 
Регистрация: 13.12.2013
Сообщений: 106

Сообщение от рони Посмотреть сообщение
почему это вас беспокоит?
Потому что хочется по уму и чтоб консоль была без ошибок
Ответить с цитированием
  #4 (permalink)  
Старый 10.05.2019, 16:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,157

Сообщение от biryukovm
чтоб консоль была без ошибок
можно отключить консоль, но зачем?
Ответить с цитированием
  #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
Ответить с цитированием
  #6 (permalink)  
Старый 10.05.2019, 22:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,157

Malleys,
Ответить с цитированием
  #7 (permalink)  
Старый 10.05.2019, 23:39
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,527

Сообщение от 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
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проверка высоты и ширины картинки и применение CSS olifus Общие вопросы Javascript 13 06.02.2016 21:27
подмена src картинки Миша-1993 Общие вопросы Javascript 5 08.12.2013 18:36
Проверка на существование картинки Sherminator Events/DOM/Window 1 02.11.2013 16:04
Проверка картинки на существование и на ее полную загрузку syegorius Events/DOM/Window 20 08.06.2011 12:59
Получение src картинки из iFrame. NixCore Events/DOM/Window 3 21.05.2011 14:19