Проверка картинки 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 = '';
});
Собственно код работает к нему вопросов нет все заменяет как надо, но вот в консоли отображается каждая ссылка картинки которой нету (хотя я заменил на заглушку и она отображается). Что мне делать с консолью и как сделать так что там не выходил список этих картинок? |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
Вы можете использовать только стили (ошибки в консоли остаются) для того, чтобы изменить вид сломанной картинки... (Почему бы сразу не писать 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 |
Malleys,
:thanks: |
Цитата:
Цитата:
у сервера спрашиваете пусть он и отдает Apache .htaccess Код:
<IfModule mod_rewrite.c>http://nginx.org/ru/docs/njs/index.html |
| Часовой пояс GMT +3, время: 10:59. |