Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Интерактивность загрузки

Автор: PARROT 17.4.2005, 20:16

Здравствуйте!
Сегодня нашла интересный сайт (это не реклама!) http://www.danger.xost.ru/shop.htm
Я такого не видела никогда!
В написании сайта использован интересный эффект загрузки страниц, какая-то интерактивность что ли. Очень хотелось узнать, как этого добиться и если можно пример с объяснением.
Спасибо!

Автор: Aliance 17.4.2005, 20:46

Мне траффик жалко, т.к. после 1 минуты сайт не загрузился и на половину. Точнее весь контент был виден - но шла загрузка. За то время, что я там был - не увидил динамичноти. Где она там и в чем выражается?

Автор: PARROT 17.4.2005, 20:53

Динамическая смена содержимого страницы. То есть одна страница еще не ушла, а вторая уже подгружается, при клике на ссылку, не происходит перезагрузки страницы, нет белого содержимого окна.
У меня быстро грузится, правда выделенка.
Вы считаете что не стоит использовать (что это фильтр или что.....)?
Мне просто понравился как вариант.

Автор: Aliance 17.4.2005, 21:20

Ты уверена что это некая вещь? Мне так не кажется smile

У меня 90% страниц грузятся мгновенно

Автор: PARROT 18.4.2005, 07:16

Уверена! У меня руки не доходят посмотреть код.

Автор: Sardar 18.4.2005, 16:29

PARROT обычный сайт, глянул в код, никакой "интерактивной загрузки" не увидел...
Если в этом топе не "всплывёт мысль", то кину в мусорку.

Что бы сделать простейшую "интерактивную загрузку", достаточно сделать не видимый фрейм, во всех ссылках target на этот фрейм, после закачки документа он сам вставляет себя в топовое окно в нужном месте. Вопрос: а зачем этот изврат? smile

Автор: PARROT 18.4.2005, 17:01

Всплывет?
Как сделать загрузку страниц <div>-ами?
Кликаешь на ссылку появляется слой, потом другой.... и т. д.
Я может не правильно выражаюсь. Но 2 программера увидив этот сайт, сказал написать разработчику и спросить как он этого добился. У меня не глюки. Я вижу разницу загрузки или подгрузки вызываемых кликом страниц.

Если есть такое желание.... можно сделать офтоп (я не обижусь smile

).

Но тогда собака останется зарытой...

Автор: Aliance 18.4.2005, 17:07

Цитата(PARROT @ 18.4.2005, 18:01)

Кликаешь на ссылку появляется слой, потом другой.... и т. д.

Легко. Меняя из видимость, отображение или наложения. Но зачем так извращаться?
Проще уж XMLHTTPRequest юзать smile

Автор: PARROT 18.4.2005, 20:47

Цитата(Aliance @ 18.4.2005, 17:07)

Но зачем так извращаться?

Зачем? Тут просто объяснить, все новое всегда интересно. Пусть не придется этим воспользоваться, так хоть знать как это делается. Можно пример? Пожалуйста!
Спасибо!

Автор: Aliance 18.4.2005, 21:35

Если слои - то это не новое. Если второе - то это уже не изврат ) это канечно мощно, но не все еще готовы принять эту мощь. не все еще доросли (я о стандартах, браузерах) так что не думаю что стоит главные вещи делать с этой помощью, т.к. оперу ты фактически всю тогда отрезаешь.
А через лои - тут просто - в onclike передаем какой-либо функцией в аргументе id слоя, и изменяем его видимость (display: none|block). Если возникнут с этим проблемы - создавай новый топик - объясним smile

Автор: PARROT 18.4.2005, 22:11

Давайте начнем с простого, а закончим новым.
Для вороны- все золото, что блестит,а для меня все новое - все надо.
На самом деле я со слоями мало работала. Пару картинок делала всего. И то плохо помню.

С чего начать? Что сделать? smile

Автор: Aliance 18.4.2005, 22:19

Я бы мог бы сразу код кинуть - но это примитивно smile

Попробуем тебя все втолковать, чтобы сама поняла.
Давай вместе составлять алгоритм действия. Я его фактически описал - попробуй ты его систиматизировать и запости smile

Далее будем делать и я буду комментировать каждый пункт 8)

Автор: PARROT 18.4.2005, 22:34

1. Создать основную страницу в которую будут подгружаться слои. (пускай их будет пока 2, чтобы не запутаться!)
2. Создать сами 2 слоя, сразу с одинаковыми координатами (это середина будет, есдинственное, с чем я столкнулась, что при разных разрешениях слои прыгают, а вот как этого избежать незнаю!)
Созданием займусь завтра. Жду комментарий. smile

Автор: Aliance 18.4.2005, 22:49

Цитата(PARROT @ 18.4.2005, 23:34)

есдинственное, с чем я столкнулась, что при разных разрешениях слои прыгают, а вот как этого избежать незнаю!)

А зачем использовать позиционирование? Можно вложенность smile

А если уж так хочеться - то задавать в процентах smile

Вот сам код:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Скрыть/показать слои</TITLE>
<script type="text/javascript" language="JavaScript">
<!--
// тут id - индификатор слоя с нужным контентом
// передается аргументом в inline обработчике
// должен быть обрамлен в кавычки (у меня в одинарные '')
function navigate(id) {
// ссылка на сам слой, в кот. будем грузить контент
var content = document.getElementById('block');
// ссылка на контент для последующего чтения его innerHTML
var elem = document.getElementById(id);
// собсна подстановка самого контента
content.innerHTML = elem.innerHTML;
}
// -->
</SCRIPT>
</HEAD>

<BODY>

тут контент
<p>
<u><div onclick="navigate('qwe')">показать контент <u>слоя</u> №1</div></u>
<BR />
<u><div onclick="navigate('asd')">показать <b>контент</b> слоя №2</div></u>
</p>
тут контент

<p><FIELDSET>

<h2>ниже будет располагаться слой:</h2>

<div id="block">будущий контент слоя</div>

<div id="qwe" style="display: none">контент <b>первого</b> слоя</div>
<div id="asd" style="display: none">контент <u>второго</u> слоя</div>

</FIELDSET></p>

тут контент

</BODY>
</HTML>

Канечно, тут можно пойти тыщами путей. Я решил так. По мере обсуждения будем модифицировать...

Автор: Sardar 19.4.2005, 00:55

Это конечно большё в вёрстку smile

Задай слоям с контентом абсолютное позиционирование и координаты выставь в 0. Затем вложи их в слой с релативной позицией(position: relative), теперь все слои выравненны и прыгать не будут.

Скрываем слои, показываем толко один(можешь как табы сделать). При клике в меню смотрим а существует ли запрашиваемый слой, если нет, то подгружаем через скрытый ифрейм. Сервер выдаст разметку, скриптом достаём и делаем новый слой в родительском окне.

Тут трюк, можно в меню поставить обычные ссылки, которые перезагружают страницу. Также поставить onclick, если JS на клиенте врублен, то перехватываем клик и грузим контент в скрытом фрейме, иначе контент как обычная страница замещает текущую. Можо задать пару параметров на сервер, дабы тот менюшки и прочую лишнюю разметку не генерил.

Автор: PARROT 19.4.2005, 13:08

С кодом я разобралась, тут http://www.traktora.spb.ru/new/sloy.html можно посмотреть, что получилось. Что делаем дальше? smile

Автор: Aliance 19.4.2005, 14:30

Зависит от твоего желания. Что тебе еще не хватает? Что исправить?

ЗЫ: ведь то, что мы делаем - посути ифрейм...

Автор: PARROT 19.4.2005, 14:35

Хочется добавить фильтры загрузки.
Есть скрипт:

Код


<script>
<!--
function Start() // Функция запуска фильтра. Кнопка Показать.
{
RevealTransFilter.filters.item(0).Apply()
RevealTransFilter.filters.item(0).Play()
RevealTransFilter.style.visibility=""
}
function Clear() // Функция скрытия изображения. Кнопка Сброс.
{
RevealTransFilter.style.visibility="hidden"
}
// -->
</SCRIPT>
<IMG id="RevealTransFilter" STYLE="filter:revealTrans(Duration=1, Transition=12);VISIBILITY: hidden;" SRC="Имя изображения" WIDTH="Ширина изображения" HEIGHT="Высота изображения"><br>
<input type=button value=" Показать " OnClick="Start()">
<input type="reset" value=" Сброс " OnClick="Clear()">

Может он конечно не совсем в тему, но тут похожее на ту таинственную загрузку.
Я не смогла соединить 2 скрипта в один, с загрузкой и фильтром!
Не получилось. smile

Автор: Aliance 19.4.2005, 15:09

Посмотри в прикрепленную тему по фильтрам, может там что найдешь (все не дойдут руки ее дописать smile

)
Добавлено @ 15:10
Если не найдешь - вечерком помогу smile

Автор: PARROT 19.4.2005, 15:41

Я почитаю пока... про фильтры. А вечерка подожду... smile

Спасибо!

Автор: Aliance 19.4.2005, 18:48

Вот сделал, легко добольно. Эффект выбрал свой - т.к. он мне больше нравится smile

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Скрыть/показать слои</TITLE>
<script type="text/javascript" language="JavaScript">
<!--

function navigate(id, times) {
 var content = document.getElementById('block');
 var elem = document.getElementById(id);
 content.innerHTML = elem.innerHTML;

///////////////////////////////////////////////////////

 content.filters[0].apply();

 switch (times) {
  case "first":
    content.style.backgroundColor = "gold";
    break;
  case "second":
    content.style.backgroundColor = "skyblue";
    break;
  default:
    return false;
 }
 content.filters[0].play();

}
// -->
</SCRIPT>
</HEAD>

<BODY>

тут контент
<p>
<u><div onclick="navigate('qwe', 'first')">показать контент <u>слоя</u> №1</div></u>
<BR />
<u><div onclick="navigate('asd', 'second')">показать <b>контент</b> слоя №2</div></u>
</p>
тут контент

<p><FIELDSET>

<h2>ниже будет располагаться слой:</h2>

<div id="block" style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.25,wipestyle=0,motion=forward); FONT: 9pt/1.3 verdana; WIDTH: 305px; COLOR: black; HEIGHT: 150px; BACKGROUND-COLOR: gold">
будущий контент слоя
</div>

<div id="qwe" style="display: none">контент <b>первого</b> слоя</div>
<div id="asd" style="display: none">контент <u>второго</u> слоя</div>

</FIELDSET></p>

тут контент

</BODY>
</HTML>

Естественно, что это работает только в IE (фильтры)

Автор: PARROT 19.4.2005, 19:20

Спасибо! Теперь нужно подумать. Ну все равно, огромное спасибо! Почва для размышления появилась. smile

Автор: Aliance 19.4.2005, 19:38

Незачто ;)
Над чем думать? Давай подумаем вместе :о)

Автор: Sardar 23.4.2005, 23:09

Написал небольшой пример: http://forum.vingrad.ru/index.php?act=ST&f=10&t=49654