Chrome переставляет элементы после события onload

w1cked · December 24, 2012

Привет!

Я только знакомлюсь с JavaScript, прошу вас помочь разобраться в нем.

Есть 3 блока. 2 сверху, 1 под ними.

Я хочу изменить ширину нижнего по ширине обоих верхних.

Я хочу сделать так:

blank.style.width=triangle_right.offsetLeft-triangle_left.offsetLeft-triangle_left.offsetWidth+"px";

blank - нижний

triangle_left и triangle_right - верхние

Есть браузер Google Chrome, который переставляет triangle_right влево на 200пх после события onload

Соответственно, ширина блока, вычисленная в приведенном коде, больше на 200пх.

Как правильно решить эту проблему на языке JavaScript?

Ниже оффтопик/что сделано:

По событию onresize этой проблемы нет.

В других браузерах этой проблемы нет.

Добавление задержки в 100мс устраняет проблему на моем компе.

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

Еще раз, суть проблемы: Google Chrome считает, что может переставить блочный элемент после события onload. Какое тогда событие происходит, когда он заканчивает переставлять элементы на странице после ее загрузки?

Great Rash · December 24, 2012

Сделайте тестовый пример на jsfiddle.net.

Sensei · December 24, 2012

Так что ли? http://jsfiddle.net/FtQNG/

w1cked · December 24, 2012

http://jsfiddle.net/kEauw/4/

На jsfiddle не воспроизводится, т.к. страница большая и проходит больше 100мс до выполнения скрипта.

Пока пытался воспроизвести, нашел источник проблемы.

Как дождаться загрузки шрифтов?

Great Rash · December 24, 2012

Как дождаться загрузки шрифтов?

window.onload дожидается загрузки вообще всего

UPD:

Есть 3 блока. 2 сверху, 1 под ними.
Я хочу изменить ширину нижнего по ширине обоих верхних.

При этом в тестовой странице у вас 4 блока. Опишите задачу подробней. Нарисуйте картинку как должно быть. Из ваших объяснений вообще ничего не понятно.

w1cked · December 24, 2012

Как дождаться загрузки шрифтов?
window.onload дожидается загрузки вообще всего

Откройте приведенный ниже код в браузере Google Chrome и несколько раз нажмите F5


<html>
<head>
<style>
@font-face {
  font-family: 'Philosopher';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/philosopher/v4/OttjxgcoEsufOGSINYBGLWOb2gHztoQeulij-1lvl-8.woff) format('woff');
}
body {
	font-family: Philosopher;
	font-size: 20px;
}
</style>
<script>
window.onload=function(){console.log('onload event -- '+document.getElementById("a").offsetWidth);}
window.setTimeout('console.log("timeout 10 event -- "+document.getElementById("a").offsetWidth)',10);
window.setTimeout('console.log("timeout 100 event -- "+document.getElementById("a").offsetWidth)',100);
</script>
</head>
<body>
<span id="a">qwe qwe qwe qwe</span>
</body>
</html>

При этом в тестовой странице у вас 4 блока. Опишите задачу подробней. Нарисуйте картинку как должно быть. Из ваших объяснений вообще ничего не понятно.

Код выше в этом сообщении описывает ситуацию подробно.

Я действительно хочу разобраться в JS, детали верстки/примеры не играют никакой роли. Код выше - отличный пример.

Вопрос чисто академический: в JS нет встроенного обработчика событий, который дожидается загрузки вообще всего?

Edited December 24, 2012 by w1cked

Great Rash · December 24, 2012

Откройте приведенный ниже код и несколько раз нажмите F5

Сделайте тестовую страницу. Мне лень копипастить код и создавать файлы на моей машине.

Код выше в этом сообщении описывает ситуацию подробно.

Код выше не объясняет и не иллюстрирует ничего. Научитесь выражать свои мысли так, чтобы их понимали окружающие, а не только вы.

Я действительно хочу разобраться в JS, детали верстки/примеры не играют никакой роли. Код выше - отличный пример.

Код выше отличный пример чего?

Вопрос чисто академический: в JS нет встроенного обработчика событий, который дожидается загрузки вообще всего?

window.onload

w1cked · December 24, 2012

Сделайте тестовую страницу. Мне лень копипастить код и создавать файлы на моей машине.

По вашей просьбе, тестовая страница: http://jsfiddle.net/rnsSD/3/

Как я писал ранее:

На jsfiddle не воспроизводится, т.к. страница большая и проходит более 100мс до выполнения скрипта.

По-этому, для воспроизведения поведения Google Chrome вам придется сохранить файл на локальном диске.

Код выше в этом сообщении описывает ситуацию подробно.
Код выше не объясняет и не иллюстрирует ничего. Научитесь выражать свои мысли так, чтобы их понимали окружающие, а не только вы.

Приведенный код иллюстрирует, что вы неправы в отношении данного вопроса:

Вопрос чисто академический: в JS нет встроенного обработчика событий, который дожидается загрузки вообще всего?
window.onload

Google Chrome не дожидается загрузки шрифтов. Еще раз, для того, чтобы в этом убедиться, нужно сохранить приведенный двумя сообщениями выше код, открыть его в Google Chrome, открыть консоль JS и несколько раз нажать F5.

Я вижу такой вывод скрипта:

onload event -- 186

timeout 10 event -- 186

timeout 100 event -- 159

Вы увидите похожий.

О чем говорят эти числа?

Great Rash · December 24, 2012

Так, еще раз, читайте внимательно, вот тут, если не верите мне.

"Обработчик window.onload срабатывает, когда загружается вся страница, включая ресурсы на ней — стили, картинки, ифреймы и т.п."

Приведенная вами страница не объясняет ничего. Я спрошу у вас еще раз. Как вам надо чтобы выглядела страница? У меня есть подозрения что все ваши проблемы можно вообще решить без скрипта. Объясните все подробно.

w1cked · December 24, 2012

Так, еще раз, читайте внимательно, вот тут, если не верите мне.
"Обработчик window.onload срабатывает, когда загружается вся страница, включая ресурсы на ней — стили, картинки, ифреймы и т.п."
Приведенная вами страница не объясняет ничего. Я спрошу у вас еще раз. Как вам надо чтобы выглядела страница? У меня есть подозрения что все ваши проблемы можно вообще решить без скрипта. Объясните все подробно.

Я могу решить возникшие проблемы средствами CSS без вашей помощи, спасибо за предложение помочь.

Я подумал, что в моей конкретной ситуации лучше воспользоваться JavaScript, потому что он предназначен для задачи вида:

0. дождаться полной загрузки страницы

1. изменить размер и левый отступ элемента с помощью простого математического выражения, операнды которого - размеры других элементов на данном конкретном мониторе пользователя

То есть, это язык в принципе предназначен для того, чтобы я мог написать element0.style.width=element1.offsetLeft;

Это - потрясающе. Я хочу этим воспользоваться. Но у меня возникла проблема с Google Chrome. Я прочитал документ, ссылку на который вы дали. Либо в данном документе ошибка, либо в Google Chrome ошибка. И я имею право так говорить. Потому что я привел маленький код, который показывает, что шрифт загружается не в момент window.onload, и не спустя 10 миллисекунд, а позже.

В общем-то, идея разработчиков из Google с самого начала была ясна: используйте библиотеки. Но зачем мне библиотека, если я написал всего пару строчек кода? Подключать jQuery или Typekit ради одного onload?

upd: Вот тут http://productforums.google.com/forum/#!topic/chrome/7VIpByhmU3U идет разговор об этой проблеме.

Решения, которые там предложили, я обычно называю матерными словами. Потому что в строке: setTimeout("print()", 500); значение 500 - это магическое число.

HTMLBook много лет служил мне всеобъемлющим источником информации. Неужели тут не найдется человека, который решил эту проблему без магических чисел? Я не разбираюсь в JavaScript, потому и прошу о помощи разобраться.

Edited December 24, 2012 by w1cked

Николя223 · December 25, 2012

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

w1cked, может браузер обновить?

ну а если дело не в браузере... а вам - принципиально важно.. может быть имеется возможность кэшировать шрифты?

P.S: гляньте на дату их беседы - три года прошло

http://dayte2.com/javascript-cache

Действительно, чуть ли не каждую неделю для себя новые открытия делаю с такими темами

Edited December 25, 2012 by Николя223

Sign In

Chrome переставляет элементы после события onload

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information