Блог

Главная - Вопросы по программированию - Проблема с получением ширины и высоты после загрузки компонента в HTML

Проблема с получением ширины и высоты после загрузки компонента в HTML

#javascript #html #css

#javascript #HTML #css

Вопрос:

Не могли бы вы дать мне решение, как прочитать размер вновь загруженного html-компонента?

У меня есть веб-страница, на которой есть класс загрузчика содержимого JavaScript для загрузки компонента HTML через AJAX и добавления его в указанную область, но проблема в том, что после загрузки и замены компонента на странице HTML переменные clientWidth и clientHeight , похоже, не работают должным образом. Согласно инструменту проверки элементов в Google Chrome, предположим <div>ABCD</div> , что у меня есть размер 250×50 пикселей. При обращении к переменной clientWidth and clientHeight предполагалось, что она вернет мне 250 пикселей и 50 пикселей соответственно, но этого не произошло.

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

У меня также есть стиль CSS для управления шириной и высотой загруженного компонента. Структура веб-страницы показана ниже.

 <html>
   *scripts content loader (AJAX)
   <script type="text/javascript" src="ajaxloader.js"></script>
  <div id="content_wrapper">
       the AJAX content loader loads the HTML component and place it here, 
       including the CSS source file. So, after it loads, it looks like this...
    <div id="menu_bar">
       <link rel="stylesheet" type="text/css" href="path/to/css/style1.css"/>
      
       // Chrome Inspect element tool returns the dimension of 250px by 50px
       <div>ABCD</div>
    </div>
  </div>

   <script>
      Callback function from the AJAX loader, fires the event after  the content has been 
      successfully loaded, and placed to the HTML page.
      function(){
        // The clientWidth and clientHeight could not work properly here, even the HTML element 
        // has already been replaced....
      }
   </script>
</html>

Ответ №1:

Трудно быть уверенным, основываясь на том, что вы нам показываете, но я предполагаю, что вы считываете ширину и высоту вашего элемента сразу после его вставки. Вам нужно подождать, пока элемент будет отрисован. A setTimeout с задержкой 0 должно сделать свое дело.

 
// insert you're element's content
setTimeout(_ => {
    // read width and height
});

Комментарии:

1. Спасибо. это фактически решило проблему с задержкой в 500 миллисекунд, но было бы лучше проверить, был ли визуализирован контент перед запуском JS-кода?

2. Извините, я сначала не заметил, что внутри кода, который вы добавляете с помощью AJAX, есть link тег (я не уверен, что это очень хорошая практика, но дело не в этом). Это означает, что как только ваш код будет введен в DOM, браузеру необходимо запросить CSS и отобразить его. Вот почему setTimeout не работает

3. Теперь я закончил тем, что использовал задержку в 100 миллисекунд, она работала нормально, но не уверен, возникнет ли проблема, если в будущем будет отображаться больше элементов.

4. Я не считаю, что это хорошая идея, если по какой-то причине загрузка файла css занимает больше времени, 100 мс может быть недостаточно. можно ли добавить CSS в заголовок?

5. Да, CSS и будет добавлен в заголовок (это решит все проблемы с задержкой), но согласно плану, HTML и CSS должны быть получены с сервера, поэтому мне пришлось сделать это таким образом.