doka-guide · solarrust · Dec 12, 2023 · Jun 26, 2023 · Jun 26, 2023 · Jul 3, 2023
diff --git a/people/prorokky/index.md b/people/prorokky/index.md
@@ -0,0 +1,4 @@
+---
+name: 'Владислав Гапонов'
+url: https://github.com/prorokky
+---
diff --git a/recipes/lazy-load-with-preview/demos/lazy-load/images/lazy-cat.jpg b/recipes/lazy-load-with-preview/demos/lazy-load/images/lazy-cat.jpg
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Ленивая загрузка — Ленивая загрузка изображений с цветным превью — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
+  <style>
+    html, body {
+      height: 100%;
+    }
+
+    body {
+      background-color:  #18191C;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .lazy-image {
+      width: 300px;
+      height: 300px;
+      background: no-repeat;
+      background-size: cover;
+      background-color: #C56FFF;
+    }
+  </style>
+</head>
+<body>
+  <img
+    loading="lazy"
+    class="lazy-image"
+    src="images/lazy-cat.jpg"
+  />
+</body>
+</html>
@@ -0,0 +1,60 @@
+---
+title: "Ленивая загрузка картинок с цветным превью"
+description: "Как добавить цветное превью при ленивой загрузки изображения."
+authors:
+  - prorokky
+related:
+  - js/intersection-observer
+  - html/img
+  - css/background-color
+tags:
+  - article
+---
+
+## Задача
+
+_Ленивая загрузка (lazy loadnig)_ — это асинхронная загрузка картинок на веб-странице. Это означает, что картинки загружаются после полной загрузки страницы или когда они появляются в видимой части окна браузера. Следовательно, если пользователь не будет прокручивать экран, то изображения, размещённые за пределами экрана, не будут загружаться.
+
+Иногда хочется, чтобы изображение появлялось не внезапно, а чтобы пользователь заранее знал, что оно там будет благодаря превью.
+
+Ленивую загрузку часто используют на сайтах с большим количеством изображений. Таким образом можно экономить трафик на сайт и повысить производительность.
+
+Ленивую загрузку можно реализовать несколькими способами:
+
+1. Атрибут `loading` в теге [`<img>`](/html/img/).
+1. Intersection Observer API. Читайте подробнее в статье «[Intersection Observer](/js/intersection-observer/)».
+
+Давайте разберём решение с атрибутом `loading`.
+
+## Готовое решение
+
+<iframe title="Ленивая загрузка" src="demos/lazy-load/" height="350"></iframe>
+
+## Разбор решения
+
+До момента загрузки изображения используются CSS-стили, которые задают свойства для тега `<img>`. Соответственно до того момента, как загрузится картинка, пользователь увидит область с определённым цветом или картинкой.
+
+### Разметка
+
+```html
+<img
+  loading="lazy"
+  class="lazy-image"
+  src="<ссылка на оригинальную картинку>"
+/>
+```
+
+### Стили
+
+Для добавления цветного превью нужно в стилях прописать свойство [`background-color`](/css/background-color/), а если нужно вставить картинку, то нужно использовать [`background-image`](/css/background-image/).
+
+```css
+.lazy-image {
+  width: 100px;
+  height: 100px;
+  background: no-repeat;
+  background-size: cover;
+  background-color: #C56FFF;
+  #background-image: "<ссылка на превью>"
+}
+```