Загрузка битого изображения при помощи verlock/vanilla-lazyload
Хочу изменить источник изображения на случай, если изображение будет битым. Я пользуюсь verlock/vanilla-lazyload'ом и нашел примерное решение этой проблемы, но я слаб в JS, поэтому застрял на месте.
у lazyload есть функция "callback_error", когда src сломан, он заменяется другим src. Это работает примерно так:
var lazyLoadInstance = new LazyLoad({
use_native: true,
callback_error: function (e) {
e.src = 'placeholder.png';
}
})
И из-за того, что использую нечто подобное в html:
<picture>
<source data-srcset="broken-image" type="image/webp">
<img data-src="broken-image" class="lazy" alt="" src="img/icons/no-image.png">
</picture>
А lazyload меняет его на это:
<picture>
<source data-srcset="img/0.webp" type="image/webp" srcset="img/0.webp">
<img data-src="img/0.jpg" class="lazy error" alt="" src="placeholder.png" loading="lazy" data-ll-status="error">
</picture>
Изображение по прежнему остается битым, ибо srcset имеет более высокий приоритет нежели src, к которому и обращается скрипт.
Я пытался сделать что-то вроде
if img contains data-ll-status="error" set <source> srcset to placeholder
Но у меня ничего не вышло.