Как сделать предварительный загрузчик страниц похожим на страницу Apple Mac - PullRequest
Новая
       13

Как сделать предварительный загрузчик страниц похожим на страницу Apple Mac

2 голосов
/ 18 декабря 2011

Если вы посмотрите на страницу Apple Mac на их веб-сайте. http://www.apple.com/mac/ Их «тело» отображает изображение в центре во время загрузки страницы. После полной загрузки страницы их содержимое исчезает. Если вы используете Chrome или Safari и откроете Element Inspector, вы увидите, что их тело получает class="loaded revealed" при загрузке страницы. И это заставляет контент исчезать. Если вы удалите классы, контент исчезнет.

Я ищу что-то подобное для моего сайта. Я не хочу, чтобы весь контент не отображался, я все еще хочу отображать верхний и нижний колонтитулы. В общем, я хочу, чтобы div#content_area опустился на готовом документе ... Единственная проблема в том, что они не используют никакого вида display:none; для своего тела. Они немного более осторожны в этом, потому что если файл JS завершится неудачно, контент все равно будет отображаться.

Как я могу это сделать? То, как они это делают, должно быть легким, потому что любой может написать что-то вроде 

$(document).ready(function() {
    $('div#content_area').attr(class, loaded revealed);
});

Все, что мне нужно сделать, это добавить функцию .slide() и скрывать содержимое до загрузки страницы.

Ответы [ 2 ]

2 голосов
/ 18 декабря 2011

Настройте свой DIV контента прямо там, где вы хотите ... установите изображение, которое вы хотите, чтобы заполнитель был сверху (с абсолютным, если это возможно / необходимо).

В CSS используйте z-index свойство сохранять изображение выше другого.

Затем вы делаете свойство IMG display:none;, а затем, когда страница загружается, вы можете включить его с помощью jQuery ... то же самое с JSзаполнитель показывает и сидит выше ... без JS, заполнитель изображения невидим, и пользователь просто видит содержимое DIV при загрузке.

Что имеет смысл?

1 голос
/ 30 декабря 2011

Обнаружили, что у Apple все непрозрачность всех элементов установлена ​​на 0. А при загрузке тела он добавляет классы к телу и использует некоторый базовый CSS, подобный этому 

div{
opacity:0;
}
body.loaded div {
opacity:1;
transition:etc.etc.;
}

Вот моя версия,http://jsfiddle.net/dqUaX/1/

Что здорово в этом:

  1. Непрозрачность считается атрибутом CSS3, поэтому, если браузер устарел, контент не будет скрыт.
  2. IЯ на самом деле использую jQuery для установки непрозрачности на 0, поэтому даже если у пользователя есть браузер css3, но JavaScript отключен, контент все равно будет отображаться.
  3. Поскольку вам потребуется CSS3, чтобы скрыть div, я использовалгигантский DRI URI для фонового изображения, поэтому его не нужно загружать.

Довольно круто нет?

Вы должны поставить скрипт до конца закрытия <body>бирка ...

...