Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.04.2020, 22:08
Интересующийся
Отправить личное сообщение для AndrewKokorev Посмотреть профиль Найти все сообщения от AndrewKokorev
 
Регистрация: 25.02.2020
Сообщений: 19

Асинхронность с offsetWidth
Привет, парни)
В общем в Google chrome свойство без проблем показывает результат. Но в Firefox почему-то показывает 0, если загнать в setTimeout(()=>{wrapper.offsetWidth},200), то без проблем отрабатывает и показывает ширину элемента. В чём может быть проблема?
Ответить с цитированием
  #2 (permalink)  
Старый 12.04.2020, 22:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

AndrewKokorev,
возможно хром использует кеш, а вы грузите html или css.
Ответить с цитированием
  #3 (permalink)  
Старый 13.04.2020, 18:08
Интересующийся
Отправить личное сообщение для AndrewKokorev Посмотреть профиль Найти все сообщения от AndrewKokorev
 
Регистрация: 25.02.2020
Сообщений: 19

Размер элемента динамический и постоянно у него разная ширина при загрузке. Потому кэш тут не при чём думаю.
Ответить с цитированием
  #4 (permalink)  
Старый 13.04.2020, 20:05
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,745

Вы хоть пример кода приведите.
Как он создается, где и когда ширина не берется?
Ответить с цитированием
  #5 (permalink)  
Старый 14.04.2020, 14:05
Интересующийся
Отправить личное сообщение для AndrewKokorev Посмотреть профиль Найти все сообщения от AndrewKokorev
 
Регистрация: 25.02.2020
Сообщений: 19

function renderCanvas() {
  canvasLayer_1.width = 40;
  canvasPixelWidth = Math.floor((canvasBase.offsetWidth * 0.99) / canvasLayer_1.width); //здесь проблема с canvasBase.offsetWidth
  canvasWrapper.style.width = `${canvasLayer_1.width * canvasPixelWidth}px`;
  canvasLayer_1.height = Math.floor(canvasBase.offsetHeight * 0.99 / canvasPixelWidth);
  canvasWrapper.style.height = `${canvasLayer_1.height * canvasPixelWidth}px`;
}


Сначала задаётся ширина канвасу, потом в зависимости от ширины идёт расчёт какое количество пикселей(у меня пиксельная рисовалка) влезет во внешний контейнер и от этого уже расчитывается ширина контейнера канваса. canvasBase это контейнер в котором лежат canvas.
Ответить с цитированием
  #6 (permalink)  
Старый 14.04.2020, 15:10
Интересующийся
Отправить личное сообщение для AndrewKokorev Посмотреть профиль Найти все сообщения от AndrewKokorev
 
Регистрация: 25.02.2020
Сообщений: 19

Элемент не скрыт. Просто такое ощущение чтоб в мозиле возможно код выполняется в то время когда еще не отработал CSS, но такого быть не должно, т.к. js подключен в конце документа. Проблема в том что в Chrome и Opera, у которых один движок всё работает норм, в Firefox и Edge появляется эта проблема что ширина на момент работы функции равна 0. И чтобы у элемента ширина была больше 0, нужно задать очень большую задержку минимум в 250 секунд
Ответить с цитированием
  #7 (permalink)  
Старый 14.04.2020, 16:53
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

https://developer.mozilla.org/en-US/...dow/load_event
Ответить с цитированием
  #8 (permalink)  
Старый 14.04.2020, 18:50
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,745

Цитата:
но такого быть не должно, т.к. js подключен в конце документа.
Где именно в конце?
Код, который стоит в теле <body> </body>, выполняется сразу, не дожидаясь загрузки всего остального. Так, что CSS еще имеет право не примениться. Даже размещение элементов имело право не произойти, т.к. Дерево DOM построено не до конца.

Последний раз редактировалось voraa, 14.04.2020 в 18:54.
Ответить с цитированием
  #9 (permalink)  
Старый 17.04.2020, 23:46
Интересующийся
Отправить личное сообщение для AndrewKokorev Посмотреть профиль Найти все сообщения от AndrewKokorev
 
Регистрация: 25.02.2020
Сообщений: 19

В общем сделал просто через async/await. JS подключен в конце в конце body. Всегда думал что js код выполняется после загрузки HTML и CSS , если ставить в конце body, а тут оказывается что даже дерево может даже до конца не сформироваться))Спасиб за пояснение
Ответить с цитированием
  #10 (permalink)  
Старый 18.04.2020, 14:20
Аватар для Paguo-86PK
Профессор
Отправить личное сообщение для Paguo-86PK Посмотреть профиль Найти все сообщения от Paguo-86PK
 
Регистрация: 16.09.2009
Сообщений: 253

Сообщение от AndrewKokorev
но такого быть не должно, т.к. js подключен в конце документа
Oткуда такая уверенность‽
HTML - не листинг программы, а язык разметки.
В нём нет никакой синхронности по-умолчанию
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как быть тут? (Асинхронность) Urukhay Общие вопросы Javascript 6 10.11.2014 17:57
Как получить offsetWidth элемента Chum Firefox/Mozilla 15 30.01.2013 22:14
Асинхронность в JavaScript devote Events/DOM/Window 64 12.09.2011 05:30
offsetWidth в ie Hugo_O Internet Explorer 11 11.08.2010 15:25
offsetWidth ie dvar Общие вопросы Javascript 9 17.09.2009 22:36