Загрузка битого изображения при помощи 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

Но у меня ничего не вышло.


Ответы (0 шт):