Начиная

Если у вас еще не установлен Node.js, то это должно быть первым делом. Перейдите на Node.js и позаботьтесь об этом.

Перейдите к корню проекта в вашем CLI, таком как Терминал, Cygwin или PowersShell.

Введите npm init, чтобы в интерактивном режиме создать файл package.json. Пока можно принять параметры по умолчанию. Метаданные в этом файле могут быть обновлены позже по мере необходимости.

npm init

Теперь в корне проекта должен существовать файл package.json. Позже это будет использоваться npm при установке модулей и запуске скриптов.

Создайте файл index.html в корне проекта. Добавьте в тело неупорядоченный список изображений с помощью класса стиля .photogrid. Для отложенной загрузки изображения вместо использования атрибута src поместите путь к изображению в атрибут данных с именем data-src. Также включите ссылку dist/style.css в заголовок документа и ссылку dist/app.js перед закрывающим тегом body.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" media="all" href="dist/style.css">
</head>
<body>
    <ul class="photogrid">
        <li>
            <img data-src="https://images.unsplash.com/reserve/unsplash_528b27288f41f_1.JPG?auto=format&fit=crop&w=2700&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="Sea breeze and splashing waves. A photo by @dankapeter on Unsplash"/>
        </li>
        <li>
            <img data-src="https://images.unsplash.com/photo-1494633114655-819eb91fde40?auto=format&fit=crop&w=2550&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="Above it All. A photo by @anthonyintraversato on Unsplash" />
        </li>
        <li>
            <img data-src="https://images.unsplash.com/photo-1511125357779-27038c647d9d?auto=format&fit=crop&w=2551&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="Found this beauty while being lost in the streets of Cancún, Mexico. A photo by @odiin on Unsplash" />
        </li>
        <li>
            <img data-src="https://images.unsplash.com/photo-1483919283443-8db97e2bcd81?auto=format&fit=crop&w=2550&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="Touring NYC. A photo by @freddymarschall on Unsplash" />
        </li>
        <li>
            <img data-src="https://images.unsplash.com/photo-1487357298028-b07e960d15a9?auto=format&fit=crop&w=2550&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="Wind turbines, Greece. A photo by @jeisblack on Unsplash" />
        </li>
    </ul>
    <script async src="dist/app.js"></script>
</body>
</html>
  • Используя Emmet, который встроен в VS Code, вы можете создать содержимое index.html, введя восклицательный знак в первой строке, а затем нажав клавишу табуляции.

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

Это достигается с помощью метода Дэвида Уолша Simple Image Lazy Load and Fade.

Создайте папку с именем src. В этой папке создайте папки js и sass.

В папке js создайте файл точки входа приложения index.js и файл модуля lazyimage.js.

В папке sass создайте файл style.scss, который будет использоваться в качестве точки входа для обработки Sass. Добавьте три партиала Sass: _base.scss, _photogrid.scss и _lazyimage.scss. Начальное подчеркивание в имени файла означает, что файл является частичным Sass и поэтому будет обработан только в случае импорта.

В модуле lazyimage.js экспортируйте этот класс Lazyimage ES6.

lazyimage.js

export default class Lazyimage {
  constructor(options) {
init() {
[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
      img.setAttribute('src', img.getAttribute('data-src'));
      img.onload = function() {
        img.removeAttribute('data-src');
      };
    });
  }
}

Импортируйте модуль lazyimage в точку входа приложения.

index.js

import Lazyimage from './lazyimage'
new Lazyimage();

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

_base.scss

ul {
  padding: 0;
}
img {
  border-style: none;
  height: auto;
  max-width: 100%;
}

Добавьте этот Sass в партиал фотосетки, чтобы применить стиль фотосетки с помощью flexbox к списку изображений.

_photogrid.scss

ul.photogrid {
  margin: 0.5vw 0.5vw 0.5vw -0.5vw;
  font-size: 0;
  flex-flow: row wrap;
  display: flex;
li {
    flex: auto;
    width: 200px;
    margin: 0.5vw;
  }
}

Добавьте этот Sass в партиал lazyimage, чтобы изображение исчезло, когда изображение загрузится, а атрибут data-src будет удален.

_lazyimage.scss

img {
  opacity: 1;
  transition: opacity 0.3s;
}
img[data-src] {
  opacity: 0;
}

Импортируйте три части в файл стиля Sass.

style.scss

@import "base";
@import "photogrid";
@import "lazyimage";

В следующем разделе рассматривается добавление Webpack и конфигураций сборки, установка зависимостей, запуск первой сборки и проверка вывода приложения.

Читать весь пост на JimFrenette.com