Начиная
Если у вас еще не установлен 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 и конфигураций сборки, установка зависимостей, запуск первой сборки и проверка вывода приложения.