Ленивая загрузка изображений webp - как добавить класс - PullRequest
Новая
       19

Ленивая загрузка изображений webp - как добавить класс

0 голосов
/ 17 января 2019

Я не могу лениво загрузить изображения webp, потому что атрибут class не виден браузером.

Я запускаю аудит в браузере Chrome, чтобы максимально ускорить мой сайт, и следующее, что нужно сделать, - это сделать изображения с экрана загруженными из-за лени. Для этого мне нужно добавить ко всем этим изображениям некоторый класс, который я буду называть в JavaScript. Но где я должен поставить атрибут класса? Если я поставлю его на место, как в коде ниже, атрибут не виден. Также некоторые бесплатные онлайн-аудиты SEO утверждают, что отсутствует атрибут alt (когда я запускаю их из Chrome). 

<picture>
    <source srcset="images/img1.webp" type="image/webp">
    <source srcset="images/img1.jpg" type="image/jpg">
    <img data-src="images/img1.jpg"  class="blog-img js-lazy-image" alt="some alt text">
</picture>

Я также пытался поместить атрибуты alt и class в тег исходного кода, но он также не работает. Так как же правильно добавить эти атрибуты?

Если я просто поставлю: 

<img data-src="images/img1.jpg"  class="blog-img js-lazy-image" alt="some alt text">

ленивая загрузка работает нормально. Но я хотел бы использовать его с картинками ... исходными тегами.

Заранее благодарю за любые ответы.

1 Ответ

0 голосов
/ 18 января 2019

Я уже нашел решение. Я публикую это, потому что, возможно, кто-то столкнется с подобной проблемой, и нет ответов, которые можно легко найти. Требуется также добавить данные до srcset, и атрибуты можно добавить обычным образом: 

<picture>
    <source data-srcset="images/img1.webp" type="image/webp" class="blog-img js-lazy-image" alt="some alt text">
    <source data-srcset="images/img1.jpg" type="image/jpg" class="blog-img js-lazy-image" alt="some alt text">
    <img data-src="images/img1.jpg" class="blog-img js-lazy-image" alt="some alt text">
</picture>

Ленивая загрузка теперь работает отлично.

...