Проверка статуса картинки
Как проверить, загрузилась ли картинка или нет? Некоторые картинки не загружаются и хотелось бы их заменять на плэйсхолдер. Через запросы fetch, ajax и т.п не получится т.к Chrome не поддерживает CORS на локалхостах, через new Image() не получается сделать.
img.src = `https://img.youtube.com/vi/do4Cb__WhlY/maxresdefault.jpg`;
img.onload = function () {
if(this.width + this.height === 0) {
this.onerror();
}
}
img.onerror = function () {
img.src = `http://localhost:4662/static/image/placeholder.png`;
}
Ответы (2 шт):
Изначально нужно поставить всем картинкам плейсхолдеры. Сразу при загрузке страницы должен срабатывать скрипт, который поменяет атрибут src в img на нужные. Плейсхолдер не изменится до того момента как новое изображение не будет загружено. Обычно нужные пути вставляют в атрибут data-src, чтобы не путаться. Так что не нужно загружать ничего js-ом. Только ссылку поменять.
Как было в ответе от Ивана Апелова, все видео по умолчанию загружается плэйсходером, склыдавем длину и ширину картинки смотрим ее размер, если картинка не равна 210 пикселям то меняем на фотку которая должна загрузится, она находится в data-src
let image = new Image();
image.src = `https://img.youtube.com/vi/do4Cb__WhlY/maxresdefault.jpg`
image.onload = function() {
if(image.width+image.height !== 210) {
$(`img[data-src="${image.src}"]`).attr("src", `${image.src}`);
}
}