Создание скрипта упрощённой версии для медленных соединений.

Здравствуйте ещё раз.

очень часто хочется понапихать на портал побольше всего - и облако тегов, и десяток скриптов. Естественно, все эти радости отрицательно сказываются на скорости загрузки страницы. Ну а что делать пользователям с медленным соединением?

Так что вот что хотелось бы сделать: создать код, отслеживающий время полной загрузки страницы, как это сделано в Google Maps, и, если оно слишком большое, предлагающий использовать альтернативную, но облегчённую версию главной страницы. Ну а это уже не проблема - создать копию портала только с самыми необходимыми виджетами. Вот.

для этого есть опера с ее специальным режимом для таких соединений. Турба, кажется

Об этом возможно надо написать - здесь.

Турба нифига не помогает, поверь. Во всяком случае, всё равно всё очень медленно, к тому же турбо снижает качество картинок.

Разве это так уже невозможно? Например, обратный отсчёт, останавливающийся при полной загрузке страницы?

Например - вот такой вариант. То есть берётся время при старте загрузки страницы, это значение присваивается переменной. Затем берётся время после загрузки (onLoad) и присваивается другой переменной. Ну а их разница и будет искомой. Дальше нужно сравнить заданное время загрузки с полученным, и если полученное больше, вывести на экран текст ссылки. Вот. Помогите только написать код.

Хм. Irbis, Lucky, Dana?

Я не понимаю смысла, допустим, ты дождался полной загрузки страницы, посчитал время загрузки, но страница-то уже загружена
Если она у тебя со всем контентом - то зачем вычислять сколько она грузится? она всё равно загрузится полностью.
Если она у тебя пустая - то она загрузится примерно одинаково, что на быстром интернете, что на медленном.

Как мне видится:
Сначала потребуется div с id="LSA" с нужным предупреждением и ссылками там где оно надо, с указанным style="display:none;"

Код:

<div id="LSA" style="display:none;">Если у вас медленное соединение с Интернет, можете посмотреть более легковесную версию портала: <a href="portal.htm">Портал Lite!</a></div>

Скрипт надо как-то положить в head

Код:

function ShowLowSpeedAttention(){
document.getElementById('LSA').style.display = 'block';
}
var timer_id = setTimeout(ShowLowSpeedAttention, 2000);

На работоспособность не претендую, "набросок", по идее после прочтения скрипта, через 2 секунды, должно запустить функцию ShowLowSpeedAttention(), которая сделает блок с предупреждением видимым...

Да, этот вариант достаточно дурацкий, твой конечно лучше. Просто это было единственное, что я нашёл.

А этот код нужно просто вставить в виджет?

Давай завтра потестирую в песочнице, если чего толковое сделаю, то напишу.

Работает, спасибо большое)

Последняя просьба. Сделать так, чтобы во время загрузки сверху появлялась картинка лоадинга, а после окончания - убиралась бы. Картинка будет вешаться примерно таким кодом:

Код:

<div id="myfooter" style="height: 20px; position: fixed; background-image: url('Картинка'); background-repeat: no-repeat; background-position: top center; width: 100%; margin: 0 auto; top: 0; left: 0; z-index: 1999; _display: none; text-align: center;"><div>

А вот с функцией java script-а помоги))
Т.е. картинку должно быть видно, пока идёт загрузка и она исчезнет после её окончания.

Ох, если не вдаваться в подробности, эту картинку нужно максимально высоко в body положить (выше контента) без display:none;, она загрузится раньше всего остального и отобразится.

Как вариант - записать в script в head
document.write(' ... здесь див с картинкой ... ');
Только там надо заменить внутри апострофы на кавычки или наоборот, чтобы они внутри не повторялись.
По идее, он должен записать div сразу же после загрузки head раздела (до начала загрузки body).

Потом надо как-то в onload для body записать

Код:

document.getElementById('myfooter').style.display = 'none';

Либо положить это в функцию, и запустить функцию, она после загрузки тела скроет id="myfooter".
Другого датчика что страница загружена вроде нет...

darkWol, прости, слишком много текста) В ява скрипте я - ноль. В html, кстати, почти тоже.

То есть должно выглядеть всё это в виджете как?

Код:

<script language="javascript" type="text/javascript">document.write(' Тот код сверху')
function onLoad () {document.getElementById('Имя дива').style.display = 'none';}</script>

А ты это всё в виджет?
onload это параметр body

Код:

<body onload="">

Я так понимаю нам такой уровень редактирования в phpBB3 недоступен.

Насчёт датчиков - вот тут. Четвёртый пост. Этот тот OnLoad?

Ну... Код загрузки работает нормально. Теперь только с картинкой. Тоже через виджет.

Код:

<script language="javascript" type="text/javascript">document.write(' Тот код сверху')
<body onload="{document.getElementById('Имя дива').style.display = 'none';}">
</script>

??

Например, в поиске google нашёл такой код ява -

Код:

google.load('search', '1');
  google.setOnLoadCallback(function() {

Полный -

Спойлер:

Код:

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1');
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('006823346027066140514:wapj03wk7-4');
    customSearchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.setAutoComplete(true);
    customSearchControl.draw('cse', options);
  }, true);
</script>

У нас body одно, оно уже есть в коде страницы...

А то что ты указал, там наверное jQuery нужно подключать, это вообще Api поиска от гугля вроде.

Попробуй что-нибудь такое:

Код:

document.onload= function () {
document.getElementById('Имя дива').style.display = 'none';
};

Даже не знаю, я с обработчиками не работал раньше... может и не будет работать, может быть window.onload надо попробовать

Отлично. Работает, спасибо. Слушай. Может, туториал создать?

Код:

<div id="urlload"  style="height: 20px; position: fixed; background-image: url('http://s001.radikal.ru/i196/1009/a8/12c4cec4ee9e.gif'); background-repeat: no-repeat; background-position: top center; width: 100%; margin: 0 auto; top: 0; left: 0; z-index: 1999; display: 'block'; text-align: center;"><div>

<script language="javascript" type="text/javascript">
window.onload= function () {
document.getElementById('urlload').style.display = 'none';
};
</script>

И хорошо, кстати, работает) Попробую сейчас сделать уход через свойство opacity. А java script поймёт что - то типа "opacity -=1;"?

Слушай. Может, туториал создать?

оформляй, будешь автором)

Opacity не всеми браузерами понимается

По аналогии с display:

Код:

document.getElementById('myfooter').style.opacity = '1.0';
document.getElementById('myfooter').style.opacity = '0.5';

и пр.

вот только надо подумать, как это таймером соединить...

Отлично. Работает, спасибо. Слушай. Может, туториал создать?

Этот скрипт разве отслеживает время полной загрузки страницы, как это сделано в Google Maps, и, если оно слишком большое, предлагает использовать альтернативную, но облегчённую версию главной страницы?
Он просто показывает картинку пока не загрузится страница. Это глупо, потому что, например, если у вас на странице будет изображение какого-то счетчика с битой ссылкой вы на этот бегунок будете смотреть до посинения

Нет. Второй скрипт просто показывает, что страница грузится. А первый, если время загрузки слишком большое, предлагает перейти на облегчённую версию портала.

darkWoL, заметил одну вещь. Код, выводящий ссылку на лёгкий портал - просто таймер. никак не зависящий от времени загрузки. => ссылка появится всё равно.
То есть нужно в window.onload прописать ещё и остановку таймера. Как это сделать?

По идее таймер должен проверять, загрузилась ли страница, и только если нет, выводить текст.

Ну дык таймер он и есть таймер, его нужно останавливать при событии onload для тега body.
Нет у нас такого редактирования шаблонов, по крайней мере на phpBB3.

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

Хм. А при событии onload для Window его нельзя остановить? Как ты это сделал с картинкой загрузки. Она работет - как только загружается страница, картинка исчезает.

А вот оно как... Я то думал оно не работает.
Тогда добавить в функцию что для window.onload что-то такое:

Код:

clearTimeout(timer_id);

По идее мы там в общем пространстве имён его запускаем и в сторонней функции должно сработать...

Код:

<script language="javascript" type="text/javascript">function ShowLowSpeedAttention(){
document.getElementById('LSA').style.display = 'block';
}
var timer_id = setTimeout(ShowLowSpeedAttention, 8000);
window.onload= function () {clearTimeout(timer_id);
};</script><div id="LSA" style="display:none;"><center><strong>Возможно, у вас слишком медленное подключение к Интернету</strong>. Попробуйте <u><a href="/portal.forum?pid=4">облегчённую версию</a></u> главной страницы</center></div>

Не работает)

единственное до чего я додумался...

Код:

window.clearTimeout(timer_id);

хотя может быть опять вилами...

А проверь мой код. Я правильно вставил функцию?