[ad_1]
Эта статья впервые появилась в номере 228 журнала .net — самого продаваемого в мире журнала для веб-дизайнеров и разработчиков.
В этом уроке я покажу вам, как вы можете удерживать пользователя на своем веб-сайте достаточно долго, чтобы загрузить изображения, которые отличают вашу домашнюю страницу от остальных.
Он основан на QueryLoader от Gaya Design и использует Raphal для создания красивых векторных фигур. В нашем руководстве будут использованы большие изображения с Flickr, чтобы показать предварительную загрузку в действии.
- Скорость имеет значение
- Начиная
- 1. Папки
- 2. Новый проект
- 3. Добавление CSS
- 4. Предварительная загрузка
- 5. Набор высоты
- 6. Оптимизация
- 7. Фальшивая финишная черта
- 8. Больше оптимизации
- 9. Процесс увеличения
- 10. Больше функциональности
- 11. Услуги по переезду
- 12. Входит Рафал
- 13. Пользовательские атрибуты
- 14. Цветовые атрибуты
- 15. Сектора
- 16. Анимация
- 17. Настройка
- 18. Усадочные элементы
- 19. Летать
Скорость имеет значение
Все веб-сайты могут оказать глобальное влияние, и это влияние, безусловно, будет зависеть от того, сколько времени потребуется вашему сайту, чтобы перейти от «0%» к полной загрузке.
Мы все сталкивались с тем, что приходилось ждать, пока загрузчик Flash загрузит свои активы. Но, по крайней мере, время от времени это разочарование уменьшалось интерактивным игривым индикатором того, сколько нам еще осталось ждать. С HTML и тем, как он продвигается, единственный способ узнать, насколько далеко загрузился наш сайт, — это обновить строку состояния с помощью процента или счетчика в адресной строке.
Начиная
Имея это в виду, мы рассмотрим, как дать пользователю этот кусочек глазной конфеты — надеюсь, он привлечет его внимание достаточно долго, чтобы дать вашему контенту то освещение, которого он заслуживает.
Мы будем создавать предварительный загрузчик с фантастической библиотекой SVG Raphal. Мы собираемся использовать существующую оригинальную библиотеку QueryLoader от GayaDesign. Исходный сценарий дает нам полосу загрузки, которая отображается на экране и заполняется по мере загрузки изображений, поэтому первые несколько шагов удалят стили, поставляемые в комплекте с QueryLoader, чтобы мы могли реализовать свои собственные стили.
1. Папки
В папке проекта находятся папки с именем css а также jsи файл demo.html. css папка пуста, но будет содержать стиль.css. js папка содержит jQuery и Raphal; библиотеки являются запасными вариантами и используются только в том случае, если CDN не отвечает.
2. Новый проект
Открой демо.html файл. В теле у нас есть два <раздел> элементы: один содержит наши изображения для предварительной загрузки, другой содержит предварительный загрузчик. Изображения будут невидимы для пользователя, пока мы не закончим их полную загрузку.
Предварительный загрузчик содержит два элемента, один из которых — наш загрузчик, а другой — круг, который мы размещаем над загрузчиком. Под этим лежит наш JavaScript, нам не нужно будет редактировать демо.html так как весь наш код будет обрабатываться JavaScript, но всегда полезно получить представление о кирпичах и растворе за обоями и штукатуркой.
- <голова>
- <мета-кодировка="utf-8">
- <название>
- <тело>
- <раздел id="загрузка">
-
- <раздел id="галерея">
- <скрипт>window.jQuery || document.write(‘‘)
- ')
- <скрипт отложить тип="текст/javascript">
- QueryLoader.init();
3. Добавление CSS
Здесь мы добавляем несколько основных стилей для нашего предварительного загрузчика и некоторую начальную видимость. я выбрал цвет розовый в качестве заполнителя для предварительного загрузчика, чтобы мы могли видеть постоянные улучшения и код, работающий по ходу дела. Вы можете удалить это в любое время; просто удалить фон: розовый;.
#loading { position: absolute; width: 100%; height: 100%; background: #fff;}#loading .circle { width: 206px; height: 206px; position: absolute; left: 50%; top: 50%; margin: -103px 0 0 -103px; background: pink;} #loading #loader { width: 220px; height: 220px; position: absolute; left: 50%; top: 50%; margin: -110px 0 0 -110px; background: transparent;}4. Предварительная загрузка
Теперь оживим страницу с помощью JavaScript. Открытым загрузчик запросов.js в js папка. Здесь мы добавляем некоторые свойства, чтобы все они были объединены в один и тот же объект, чтобы уменьшить потери памяти. Мы вернемся к этим свойствам позже в этом руководстве.
var QueryLoader = { overlay: "", loadBar: "", preloader: "", items: new Array(), doneStatus: 0, doneNow: 0, selectorPreload: "body", logoImg: false, logoCircle: false, fakeCircle: false, ieLoadFixTime: 2000, ieTimeout: "", initialise: true, sec: 0, raph: false, init: function() {5. Набор высоты
Только внутри в этом мы добавим небольшой jQuery изменить размер Функция для регулировки высоты страницы, чтобы отразить, если пользователь изменяет размер своего окна в любой момент. Без этого, если пользователь уменьшит страницу по вертикали, вы потенциально можете потерять предварительный загрузчик до внушительной складки.
...initialise: true,sec:0,raph: false,init: function() { $(window).resize(function() { $('#loading').height($(window).height()); }); $('#loading').height($(window).height()); if (navigator.userAgent.match(/MSIE (d+(?:.d+)+(?:bd*)?)/) == "MSIE 6.0,6.0") { // break if IE6 return false; } if(QueryLoad.selectorPreload == 'body') { QueryLoader.spawnLoader(); QueryLoader.getImages(QueryLoader.selectorPreload); QueryLoader.createPreloading(); } else { $(document.ready(function) { QueryLoader.spawnLoader();...6. Оптимизация
В исходном скрипте QueryLoader есть некоторый код, который нам не нужен. Код вставляет в страницу некоторый HTML-код, который мы будем делать позже с Raphal, поэтому нам это не нужно. Вы должны найти это в строке 115 загрузчик запросов.js.
spawnLoader: function() { if (QueryLoader.selectorPreload == "body") { var height = $(window).height(); var width = $(window).width(); var position = "fixed"; } else { var height = $(QueryLoader.selectorPreload).outerHeight(); var width = $(QueryLoader.selectorPreload).outerWidth(); var position = "absolute"; } var left = $(QueryLoader.selectorPreload).offset()['left']; var top = $(QueryLoader.selectorPreload).offset()['top']; // <<< Step 6 begin removal QueryLoader.overlay = $("").appendTo($(QueryLoader.selectorPreload)); $(QueryLoader.overlay).addClass("QOverlay"); $(QueryLoader.overlay).css({ position: position, top: top, left: left, width: width + "px", height: height + "px" }); QueryLoader.loadBar = $("").appendTo($(QueryLoader.overlay)); $(QueryLoader.loadBar).addClass("QLoader"); $(QueryLoader.loadBar).css({ position: "relative", top: "50%", width: "0%" }); // <<< End removal},7. Фальшивая финишная черта
Здесь мы адаптируем doneЗагрузить функция, сообщающая #галерея показывать; технически это означает установку отображать собственность на блокировать. Мы также говорим jQuery анимировать непрозрачность #загрузка экран, поэтому мы исчезаем #загрузка элемент перед удалением его из DOM.
doneLoad: function() { //prevent IE from calling the fix clearTimeout(QueryLoader.ieTimeout); //determine the height of the preloader for the effect if (QueryLoader.selectorPreload == "body") { var height = $(window).height(); } else { var height = $(QueryLoader.selectorPreload).outerHeight(); } // Step 7 add this code $('#gallery').show(); $('#loading').animate({'opacity': 0}, 1200, function() { $(this).remove(); })8. Больше оптимизации
Затем мы удаляем больше кода с исходной панели загрузки, этот код можно найти сразу под кодом, введенным на шаге 7. Исходная анимация исчезнет и исчезнет сама собой, где (на шаге 7) мы сказали нашей галерее появляться и исчезать. погрузчик. Мы адаптируем больше этой функции ближе к концу урока.
doneLoad: function() { ... $('#gallery').show(); $('#loading').animate({'opacity': 0}, 1200, function() { $(this).remove(); }) // <<< Step 8 Remove this code $(QueryLoader.loadBar).animate({ height: height + "px", top: 0 }, 500, "linear", function() { $(QueryLoader.overlay).fadeOut(800); $(QueryLoader.preloader).remove(); }); // <<< End removal }9. Процесс увеличения
Мы представляем призыв к updateVal здесь функция, которая обновит наш круг SVG. QueryLoader.doneNow количество изображений, выполненных при загрузке страницы. 105 относится к радиусу окружности и это.сек это путь Raphal SVG.
imgCallback: function() { QueryLoader.doneNow++; QueryLoader.updateVal(QueryLoader.doneNow, this.items.length, 105, this.sec); QueryLoader.animateLoader();},10. Больше функциональности
Здесь мы добавляем updateVal функция прямо под imgОбратный вызов функция. Если инициализировать Параметр имеет значение true, это означает, что у нас есть круг для анимации и продолжения рисования. Кроме того, если круг завершен, мы должны обмануть круг, потому что мы не можем сделать дугу в 360 градусов.
updateVal: function(value, total, R, hand, id) { if (QueryLoader.initialise) { if(value == total) { this.raph.clear(); // 2.1.1 - CIRCLE COMPLETION. this.fakeCircle = this.raph.circle(110,110,105).attr({colour: '', "stroke-width": 10}); } else { hand.animate({arc: [value, total, R]}, 0, ">"); } }},11. Услуги по переезду
Мы удаляем большую часть HTML-кода, который внедряется с помощью исходного скрипта QueryLoader. Раньше для этого нужно было вводить элементы в DOM, чтобы создать анимацию
createPreloading: function() { QueryLoader.preloader = $("").appendTo(QueryLoader.selectorPreload); $(QueryLoader.preloader).css({ height: "0px", width: "0px", overflow: "hidden" });12. Входит Рафал
Теперь самое интересное: мы создаем два элемента SVG, которые берут на себя элементы, присутствующие в нашем HTML. Мы устанавливаем некоторые переменные и атрибуты для понимания SVG. #загрузчик больше, чем #внутренний кругэто создает иллюзию того, что загрузчик является загружаемой границей.
createPreloading: function() { var logoC = Raphael("innerCircle", 206,206); $('#innerCircle').css('z-index', '31'); this.logoCircle = logoC.circle(103,103,103).attr({'stroke': 'rgb(125,208,163)', 'fill': 'url(wave.jpg)', "stroke-width": 0}); this.raph = Raphael("loader", 220, 220), xy = 110, R = 210, this.initialise = true, param = {stroke: "#000", "stroke-width": 10}, // Custom Attribute this.raph.customAttributes.arc = function (value, total, R) { var alpha = 360 / total * value, a = (90 - alpha) * Math.PI / 180, x = xy + R * Math.cos(a), y = xy - R * Math.sin(a), color="rgb(29,79,107)", path; path = [["M", xy, xy - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]]; // MATRIX PATH return {path: path, stroke: color}; };...13. Пользовательские атрибуты
Это сложный математический лабиринт, который в конечном итоге дает матричный путь для дуги, которая должна быть нарисована как дуга. К счастью, единственными ключевыми значениями являются ценность, общий а также р (радиус); они анимированы updateVal, как определено ранее. Здесь также задается цвет, но его можно настроить по своему усмотрению.
// Custom Attributethis.raph.customAttributes.arc = function (value, total, R) { var alpha = 360 / total * value, a = (90 - alpha) * Math.PI / 180, x = xy + R * Math.cos(a), y = xy - R * Math.sin(a), color="rgb(29,79,107)", path; if (total == value) {path = [["M", xy, xy - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]]; } else { path = [["M", xy, xy - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]]; } return {path: path, stroke: color};};14. Цветовые атрибуты
Это идет сразу после окончания предыдущего customAttribute.arc функция. Он используется в updateVal функция и является ключом к созданию эффекта полного круга после загрузки изображений. Цвет можно настроить или даже заменить изображением, но при настройке убедитесь, что вы изменили все значения на одинаковые, иначе вы получите разноцветные круги!
this.raph.customAttributes.colour = function() { return {stroke: 'rgb(29,79,107)'};};15. Сектора
Следуя предыдущему коду, мы определяем здесь сектор после создания пути и установки его дуги (которая вызовет нашу функцию дуги из шага 13). Поскольку это касается только настройки нашего предварительного загрузчика, когда мы вызываем updateValмы устанавливаем количество загружаемых изображений равным 0.
var length = QueryLoader.items.length; this.sec = this.raph.path().attr(param).attr({arc: [0, 60, R]});QueryLoader.updateVal(0, length, 105, this.sec, 2);16. Анимация
анимацияLoader вызывается после завершения загрузки каждого изображения. Мы заменяем большую часть логики, поэтому я рекомендую просто переписать функцию. Функция определяет, сколько изображений осталось ждать загрузки, и если мы опережаем 99 процентов, мы запускаем doneЗагрузить.
animateLoader: function() {var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;var angle = (3.6 * perc);QueryLoader.updateVal(QueryLoader.doneNow, this.items.length, 105, this.sec, 2);if (perc > 99) {QueryLoader.doneLoad();}},doneLoad: function() { ...17. Настройка
Здесь мы уменьшаем непрозрачность каждого круга, а затем полностью удаляем элементы предварительной загрузки. На данный момент у нас есть завершенный предварительный загрузчик, который будет работать в браузерах вплоть до IE7; однако мы можем пойти еще дальше и добавить дополнительный элемент индивидуальности.
...doneLoad: function {...var qLoad = this;qLoad.sec.hide();qLoad.logoCircle.stop().animate({opacity: 0}, 700);qLoad.fakeCircle.stop().animate({opacity: 0}, 700, 'easeInOut'); $('#loading').css('min-height', 'auto').animate({top: ($(window).height()*-1) + 'px'}, '800', function() { $(this).remove(); });});...18. Усадочные элементы
Используя преобразования CSS, мы можем масштабировать или «сжимать» элементы. В данном случае это круги, чтобы придать им видимость зарядки до того, как они исчезнут с экрана. Мы делаем это, оборачивая анимацию непрозрачности анимацией «трансформации».
...doneLoad: function() {...var qLoad = this;qLoad.sec.hide();qLoad.logoCircle.stop().animate({transform: "s0.6 0.6 103 103"}, '1000', "easeInOut");qLoad.fakeCircle.stop().animate({transform: "s0.6 0.6 110 110"}, '1000', "easeInOut", function() {qLoad.logoCircle.stop().animate({opacity: 0}, 700);qLoad.fakeCircle.stop().animate({opacity: 0}, 700, 'easeInOut');$('#loading').css('min-height', 'auto').animate({top: ($(window).height()*-1) + 'px'}, '800', function() {$(this).remove();});});}...19. Летать
Добавление ключевых кадров и определений анимации означает, что мы можем применять CSS-преобразования через CSS, а также через JavaScript, чтобы создать эффект полета экрана, который мы здесь показываем. Вуаля: у нас есть прекрасный прелоадер для нашей большой галереи изображений!
/* Keyframes */@-webkit-keyframes fly-away { 0% { -webkit-transform: translate3d(0,0, 0); } 100% { -webkit-transform: translate3d(0,-900px, 0); }}@-moz-keyframes fly-away { 0% { -moz-transform: translate(0,0); } 100% { -moz-transform: translate(0,-900px); }}@-ms-keyframes fly-away { 0% { -ms-transform: translate(0,0); } 100% { -ms-transform: translate(0,-900px); }}...[ad_2]
