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

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

Я провожу аудит в браузере 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">

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

Заранее благодарим вас за ответы.


class lazy-loading webp alt
person zwora    schedule 17.01.2019    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Я уже нашел решение. Публикую, потому что, возможно, кто-то столкнется с подобной проблемой, а ответов, которые можно было бы легко найти, нет. Также необходимо добавить data- перед 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>

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

person zwora    schedule 18.01.2019
comment
Это не работает для меня с той же стратегией. Есть идеи, почему? - person Priyanka; 24.03.2019
comment
Вам также понадобится библиотека для выполнения ленивой загрузки изображений ... - person Dylan Watson; 08.05.2020
comment
web.dev/codelab-use-lazysizes-to-lazyload-images Это тоже можно сделать. добавьте className = lazyload как в источник, так и в img, и значением src будет data-src и data-srcset - person Germa Vinsmoke; 20.10.2020

arrow_upward
0
arrow_downward

Используйте этот код:

<picture>
    <!--[if IE 9]><video style="display: none;><![endif]-->
    <source data-srcset="images/img1.webp" type="image/webp">
    <source data-srcset="images/img1.jpg" type="image/jpg">
    <!--[if IE 9]></video><![endif]-->
    <img    
        data-src="images/img1.jpg"
        class="lazyload"
        alt="image with artdirection" />
</picture>

Источник:
https://github.com/aFarkas/lazysizes#js-api

person MohsenB    schedule 28.06.2020