jQuery $ .position () действует по-другому во время $ (document) .ready в chrome (webkit?) - PullRequest
Новая
       14

jQuery $ .position () действует по-другому во время $ (document) .ready в chrome (webkit?)

2 голосов
/ 23 марта 2012

Когда я пытаюсь получить позицию элемента в $ (document) .ready (function () {}); он дает другое (неправильное) значение для position.top в chrome, но корректно в firefox. Он отключается на 15-45 пикселей в зависимости от того, за какой элемент он получает позицию.

У меня есть список элементов в области просмотра с переполнением: скрыто, и я хочу получить позицию каждого из этих элементов. 

<div class='viewport'>
  <div class='item'>Item Info</div>
  <div class='item'>Item Info</div>
  <div class='item'>Item Info</div>
  <div class='item'>Item Info</div>
</div>

.viewport { position:relative; overflow: hidden; }
.item { margin-left: 10px; }

Когда я делаю $(".viewport .item").each(function() { var pos = this.position(); });, он выдаст значения, но они не правы.

Еще более странная вещь: если я сделаю это с консоли (после загрузки страницы), она вернет правильные значения. Кажется, что неправильные значения появляются только во время $ (document) .ready.

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

1 Ответ

2 голосов
/ 25 августа 2014

position() ( документы ), как и другие функции в модуле offset (и, в целом, в модулях css), зависит от фактического положения элементов в DOM после они оказаны.

$(document).ready(), с другой стороны, срабатывает сразу после создания DOM.
В современных браузерах это соответствует DOMContentLoaded :

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

В ready вы можете безопасно манипулировать DOM (прикреплять события и т. Д.), Но у вас могут быть проблемы, если вы «измеряете» его. Например, он не ожидает загрузки таблиц стилей или загрузки изображений и их визуализации.

Вы столкнулись с очень раздражающей проблемой, поскольку она сильно зависит от платформы (браузер + версия jQuery): в нашем случае она работала в двух браузерах из трех, и даже в третьем она работала в 99% случаев. время, которое указывает, что это, вероятно, условие гонки (JavaScript является однопоточным, а браузер - нет).

Если вам нужно измерить элементы, вам лучше использовать $(window).load()

...