Предыдущий ролик Следующий ролик  

Видео урок: Предзагрузка изображений

Создание отзывчивого веб-дизайна

Теперь, перед тем как мы начнем создавать анимацию области hero, нам нужно настроить предварительный загрузчик, который мы добавили в начале курса. Также мы добавим функцию, чтобы можно было запустить анимацию. Итак, сначала давайте вернемся в текстовый редактор. Заходим в файл design.js. Прокручиваем вверх. Вот здесь, в document.ready, я хочу удалить графику заднего фона, которая была предназначена для верхнего колонтитула. Это было нужно для предыдущего курса. Вы можете сделать это внутри CSS, если хотите, а я все же сделаю это здесь. Даже если у кого-то нет JavaScript, он все равно сможет увидеть изображение в области верхнего колонтитула.

Чтобы сделать это в JavaScript, пишем знак доллара, круглые скобки, нацеливаемся на верхний колонтитул. За круглыми скобками .css. Круглые скобки, точка с запятой, Здесь внутри строковый литерал background-image. За строковым литералом, но внутри круглых скобок запятая. Значения будут установлены на none. То есть благодаря JavaScript мы уберем эти изображения для заднего фона. Это первый шаг. Второй шаг заключается в том, чтобы перейти в верх документа и объявить другую переменную. Пишем var, firstRun. Устанавливаем ее на true.

Нам нужно установить firstRun, потому что мы не хотим, чтобы анимация происходила дальше. Мы хотим, чтобы она происходила один раз. Итак, эта переменная firstRun устанавливается на true, а как только мы запускаем анимацию, мы устанавливаем ее на false. Когда переменная создана, прокручиваем за document.ready. Добавляем пользовательскую функцию. Называем ее animateHero. Круглые и фигурные скобки. Они открыты. Внутри animateHero сначала добавляем оператор условия. Внутри круглых скобок для if мы пишем: if firstRun, поскольку мы устанавливаем значение на true, мы просто пишем if firstRun, если значение верно, это будет условный оператор со значением true.

Итак, вот здесь мы устанавливаем firstRun на false. На следующей строке мы запускаем наш загрузчик изображений. Пишем знак доллара, круглые скобки. Нацеливаемся на hero div. Итак, две кавычки для строкового литерала. Решетка, hero, пробел, img. Мы ищем все изображения внутри области hero. За круглыми скобками пишем .imgpreload. Опять же, это функция предварительной загрузки, которую мы использовали ранее.

Круглые скобки, точка с запятой. Здесь внутри мы пишем function. Круглые и фигурные скобки. И вот что здесь произойдет: после того как изображения предварительно загрузятся при помощи этого пользовательского плагина, заработает эта конкретная функция. Чтобы убедиться, что все работает, напишем здесь внутри алерт. Внутри алерта мы напишем "images loaded", это строковый литерал в кавычках. Теперь нам нужно запустить функцию animateHero. Идем сюда, копируем имя функции animateHero, и мы запустим ее, как только будет загружен наш контент. Поскольку изображения, которые нам нужно найти, еще не были загружены, нам нужно запускать ее после функции load.

Итак, вот здесь в функциях loadHero находим первую, загружаем контекст hero для большого экрана, так что команда load, это единственное, что находится в данных круглых скобках. После строкового литерала пишем запятую, затем function, круглые и фигурные скобки. Также как и с функцией предзагрузки, эта функция не запустится, пока не будет загружен весь нужный контент. Внутри фигурных скобок запускаем нашу функцию animateHero. Итак, animateHero, круглые скобки и точка с запятой.

Идем сюда и копируем всю эту функцию обратного вызова. Переходим к среднему размеру экрана. Выходим за строковый литерал, но находимся в круглых скобках. Вставляем все сюда. Когда все на месте, мы запускаем функцию animateHero только после того, как был запущен контент для большого или среднего экранов. Как только запускается эта функция animateHero, мы берем переменную firstRun и устанавливаем ее обратно на false. Таким образом, когда мы меняем размер браузера, мы не запускаем постоянно функцию animateHero, поскольку firstRun устанавливается на false. То есть мы запускаем эту функцию один раз.

Чтобы протестировать это, нажимаем Save. Возвращаемся в браузер и нажимаем Reload. Как только изображения загружены должным образом из плагина предварительной загрузки, мы получаем алерт JavaScript, который говорит нам, что изображения были загружены. Нажимаю OK. Теперь, когда я перемещаюсь между большим или средним экраном, вы видите, что алерт не появляется снова, поскольку переменная firstRun теперь установлена на false. Однако если на среднем экране я нажму Reload, алерт снова появится, нажму OK, а затем когда мы снова меняем размер окна со среднего на большой, во второй раз функция animateHero не запустится.

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