Как лениво загрузить изображение в CSS

#html #css #seo #lazy-loading

#HTML #css #seo #ленивая загрузка

Вопрос:

 .image--about {
    background: url(../img/ZIZF.gif) no-repeat center;
    background-size: cover
}
 

У меня есть этот CSS. Я хочу использовать отложенную загрузку для следующих изображений, которые я загружаю через CSS, не могли бы вы мне помочь?

Ответ №1:

Я не знаю, возможно ли применить отложенную загрузку с помощью css, но это возможно с помощью HTML, добавив один атрибут loading="lazy"

 <img src="myimage.jpg" loading="lazy" alt="..." />
 

другие значения для загрузки, такие как eager и auto

для других методов потребуется JavaScript проверьте это 👉 Пять способов отложенной загрузки изображений для повышения производительности веб-сайта

Комментарии:

1. Привет, я попытался добавить атрибут folloewing в изображения, но я просто хочу добавить его в css, мое изображение загружается через css, если вы могли бы мне помочь

2. Я ищу это, но пока что есть способ загрузить изображение только с помощью css, есть методы servals, которые включают JavaScript и один метод, как я упоминаю в своем ответе

3. проверьте это для получения дополнительной информации web.dev/lazy-loading-images