Проверка картинки 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, время: 05:15. |