Сделать окно поиска Google более гладким при отображении страницы - PullRequest
Новая
       25

Сделать окно поиска Google более гладким при отображении страницы

0 голосов
/ 22 сентября 2019

Следующий код используется для функции поиска по сайту.Javascript предоставляется Google. 

<div id="search" class="cf">
  <script>
    (function () {
      var cx = '00000000000';
      var gcse = document.createElement('script');
      gcse.type = 'text/javascript';
      gcse.async = true;
      gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(gcse, s);
    })();
  </script>
  <gcse:search></gcse:search>
</div>

CSS: 

#search {
  width:60%;
  margin-left:40px;
}

При загрузке страницы отображается следующее:

Description

Все замечательно, за исключением того, что когда окно поиска отображается впервые, оно кажется сжатым горизонтально на долю секунды, пока загружается JavaScript, пока оно, наконец, не получит свою окончательную ширину.Это кажется отрывистым и неприятным визуально.Как видите, ширина для div определена.

Как можно более плавно отобразить это окно поиска? 

(function() {
  var cx = '005029469966757601490:wu1xlk8ufeu';
  var gcse = document.createElement('script');
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
    '//cse.google.com/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(gcse, s);
})();
#container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  height: 4.3em;
}

#menu {
  margin: 0 0 5px 15px;
  width: 10%;
  font-size: 1.8em;
  background: #F1C232;
  line-height: 40px;
}

#menu a {
  color: white;
}

#search {
  width: 80%;
  margin-left: 40px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div id="container">
  <div id="menu">
    <a href="#"><i class="fa fa-bars"></i></a>
  </div>
  <div id="search">
    <gcse:search></gcse:search>
  </div>
</div>

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

...