Ленивая загрузка изображений в Next.js


Введение

Все мы уже слышали этот термин. Ленивая загрузка. Что же это такое?

Ленивая загрузка откладывает загрузку ресурсов на странице, в данном случае изображений, до тех пор, пока они действительно не потребуются. Вместо того чтобы загружать эти ресурсы сразу после загрузки страницы, как это обычно происходит, они откладываются до тех пор, пока они не понадобятся пользователю. Это имеет множество преимуществ. С помощью ленивой загрузки мы можем заставить наши веб-страницы загружаться очень быстро. В этом руководстве мы рассмотрим, как лениво загружать изображения с помощью Next.js.

Next.js по умолчанию поставляется с компонентом Image. Ленивая загрузка включена по умолчанию в компоненте Next.js Image. Это полезно не только для конечного пользователя, но и для сервера, поскольку ему не нужно выполнять генерацию изображений, которые могут потребоваться или не потребоваться.

Установка и настройка

Вы можете создать новое приложение Next.js с помощью следующей команды:

npx create-next-app lazy-load-images
Войти в полноэкранный режим Выйти из полноэкранного режима

Давайте запустим приложение, выполнив следующую команду

npm run dev
# or
yarn dev
Войти в полноэкранный режим Выйти из полноэкранного режима

Мы запускаем наше приложение на сервере разработки. Откройте браузер и перейдите по адресу https://localhost:3000.

Ленивая загрузка

Добавьте новый файл изображения в каталог public. В директории pages создайте новый файл lazy-load.js. Это будет наша страница Next.js.

Добавьте в файл следующее

export default function ImagePage() {
    return (
        <h1>Image Page</h1>
    );
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Посетите сайт https://localhost:3000/lazy-load для предварительного просмотра страницы. Теперь, когда страница успешно отобразилась, мы можем продолжить реализацию ленивой загрузки.

Сначала импортируйте компонент Image из Next.js

import Image from "next/image";
Войдите в полноэкранный режим Выйти из полноэкранного режима

Затем замените тег <h1> на этот компонент Image.

<Image
  src="/github.jpg"
  alt="Github"
  width={600}
  height={450}
  layout="responsive"
  loading="lazy"
/>
Вход в полноэкранный режим Выйти из полноэкранного режима

Теперь просмотрите его в браузере, чтобы увидеть результаты. Добавьте много изображений и посмотрите на ленивую загрузку в действии при прокрутке.

Оцените статью
Procodings.ru
Добавить комментарий