Ленивые загрузки изображений в Уго

При написании другого поста я понял, что я не задокументировал/описал мой образ Ленивая загрузка Реализация в Hugo. В любом месте, так вот это приходит. Полный исходный код в Это репо Отказ

Первое, что нам нужно, есть Отзывчивые изображения , не то, что вы получаете при установке ширины до 100% в CSS, но разные версии одного и того же изображения в разных разрешениях, чтобы веб-браузер может выбрать лучший (используя SrCet ).

Изменение структуры папки

Структура, которую я имел до реализации, это все файлы разметки в той же папке с изображениями общего Статические/изображения папка. Использовать Обработка изображений В Уго нам нужно использовать Страница ресурсов , означает, что мы должны создать папку для каждого поста, где мы помещаем как файл markown, и изображения, связанные с этим постом.

До:

content
 - articles
   - 2019-11-15-dark-mode.md
   - 2019-11-17-netlify-cms.md

После:

content
 - articles
   - 2019-11-15-dark-mode
     - index.md
     - jay-wennington-loAgTdeDcIU-unsplash.jpg
   - 2019-11-17-netlify-cms
     - hero-image.png
     - index.md
     - insert-image.png

Написание короткого конца

Чтобы иметь возможность ссылаться на изображения в файлах Markdown, нам нужно Шорткод Отказ Это самая сложная часть, чтобы объяснить, поскольку код немного длин. Это потому, что у меня есть возможность пройти параметры для того, иметь ли границу, пользовательскую ширину, лайтбокс и подпись. Это также может быть, потому что мои навыки шаблона GO сомнительны.

Я использую шорткод в моем index.md Файл для ссылки на изображение такое:

{{}}

То, что происходит в режиме реализации Shortcode ниже, состоит в том, что я создаю размытую версию изображения, размер которого ширина разместится до 48 пикселей (сохраняя соотношение сторон). Это изображение, которое вы увидите, прежде чем выбрасть лучшая версия. Это небольшое изображение встроен в HTML в качестве кодированной строки Base64, так что не требуется дополнительного запроса, необходимого для получения начального изображения.

Затем генерируются несколько разных версий, но только если исходное изображение больше, чем версия, я пытаюсь сгенерировать. Я не хочу высококашивать изображение (оно будет размыто). Переменная $ src_set Прилагается с каждой версией и будет содержать все версии (размеры), когда начинается часть HTML.

Шорткод Post-Image.html :

{{ $image := (.Page.Resources.GetMatch  (index .Params.image)) }}
{{ $alt := .Get "alt" }}
{{ $width := .Get "width" }}
{{ $borderless := .Get "borderless" }}
{{ $placeholder := ($image.Resize "48x q20") | images.Filter (images.GaussianBlur 6) }}
{{ $src := $image }}
{{ $src_set := ""}}

{{ $src_set = (print $image.RelPermalink " " $image.Width "w") }}
{{ $src := $image }}

{{ if ge $image.Width "500"}}
{{ $x_small := $image.Resize "500x" }}
{{ $src_set = (print $src_set ", "  $x_small.RelPermalink " 500w") }}
{{ end }}

{{ if ge $image.Width "800"}}
{{ $small := $image.Resize "800x" }}
{{ $src_set = (print $src_set ", " $small.RelPermalink " 800w") }}
{{ end }}

{{ if ge $image.Width "1200"}}
{{ $medium := $image.Resize "1200x" }}
{{ $src_set = (print $src_set ", " $medium.RelPermalink " 1200w") }}
{{ end }}

{{ if gt $image.Width "1500"}}
{{ $large := $image.Resize "1500x" }}
{{ $src_set = (print $src_set ", " $large.RelPermalink " 1500w") }}
{{ end }}

{{ $border_class := "image-border" }}
{{ if $borderless}}
{{ $border_class = "" }}
{{ end }}





  {{ if .Get "lightbox" }}
  
    {{ end }}
    
    {{ if .Get "lightbox" }}
  
  {{ end }}
  {{ if .Inner }}
  
  {{ end }}

Добавление JavaScript

Здесь есть несколько классов CSS, которые действуют как сигнал для разных функций JavaScript. Lightbox это такая вещь, но интересная вот Лазиловая дорога . Я использую библиотеку JavaScript под названием Лазизирует Это включено в мой JavaScript Bundle, и я создал HTML для работы с этой библиотекой.

Возможно, вы заметили, что код выше выглядит несколько дублирован, это потому, что у меня есть носирка Тег для тех, кто с JavaScript отключен. В этом случае тег SRCSet все еще используется для обеспечения лучшего изображения, но без ленивой загрузки.

Здесь нет «размытия эффекта». Это сознательное решение, поскольку это немного проще реализовать и чувствует себя быстрее, на мой взгляд.

Рассмотрение производительности

В Документация Hugo для обработки изображений Это четко заявлено, что рекомендуется включать сгенерированные изображения в контроле источника. Это следует не создавать одни и те же изображения снова и снова. На большом участке с множеством изображений это может иметь большое значение.

Оригинал: “https://dev.to/p4lm/lazy-loading-images-in-hugo-45e0”