Question

请访问我们的主页http://froy.com。

在页面加载的前半秒内，您会看到“商店”按钮以及按钮上方的文本显示在屏幕左侧附近。当页面完成加载后，它们会移动到正确的位置。

此问题似乎只发生在Chrome上。我们的网站响应迅速。

理想情况下，我们希望网站加载http://ae.com。他们使用与主页文本和按钮类似的布局，但它们都正确加载。

我不介意视频加载最后，当视频出现时所有内容都会降低，但我发现文本/按钮从左向右移动非常不专业。

Answer 1

这些按钮不应该是一个问题，如果视频没有渲染，它们将处于什么位置。
一旦呈现，它们应该没问题。

Answer 2

我会看看你的视频和视频容器。也许尝试将.slideshow-video-container CSS规则更改为：

.slideshow-video-container {
    position: relative;
    padding-top: 25px;
    overflow: hidden;
}

Answer 3

我建议您使用覆盖元素隐藏整个页面，并且只有在加载完所有内容后才淡化该元素。这应该可以解决大部分或全部渲染问题。这是一个例子：

＆＃13;

$(function(){
  $('#overlay').fadeOut();
})

＆＃13;

div#content{
  width:50%;
  margin:auto;
  p{
    margin:2rem;
    padding:0;
  }
}

div#overlay{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:#fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=content>
  <p>Authoritatively build effective networks rather than transparent ideas. Monotonectally pontificate high-quality content whereas world-class schemas. Distinctively leverage other's distributed scenarios vis-a-vis synergistic applications. Proactively implement bricks-and-clicks.</p>
  <p>Authoritatively build effective networks rather than transparent ideas. Monotonectally pontificate high-quality content whereas world-class schemas. Distinctively leverage other's distributed scenarios vis-a-vis synergistic applications. Proactively implement bricks-and-clicks.</p>
  <p>Authoritatively build effective networks rather than transparent ideas. Monotonectally pontificate high-quality content whereas world-class schemas. Distinctively leverage other's distributed scenarios vis-a-vis synergistic applications. Proactively implement bricks-and-clicks.</p>
  <p>Authoritatively build effective networks rather than transparent ideas. Monotonectally pontificate high-quality content whereas world-class schemas. Distinctively leverage other's distributed scenarios vis-a-vis synergistic applications. Proactively implement bricks-and-clicks.</p>
  <p>Authoritatively build effective networks rather than transparent ideas. Monotonectally pontificate high-quality content whereas world-class schemas. Distinctively leverage other's distributed scenarios vis-a-vis synergistic applications. Proactively implement bricks-and-clicks.</p>
  <p>Authoritatively build effective networks rather than transparent ideas. Monotonectally pontificate high-quality content whereas world-class schemas. Distinctively leverage other's distributed scenarios vis-a-vis synergistic applications. Proactively implement bricks-and-clicks.</p>
  <p>Authoritatively build effective networks rather than transparent ideas. Monotonectally pontificate high-quality content whereas world-class schemas. Distinctively leverage other's distributed scenarios vis-a-vis synergistic applications. Proactively implement bricks-and-clicks.</p>
  <p>Authoritatively build effective networks rather than transparent ideas. Monotonectally pontificate high-quality content whereas world-class schemas. Distinctively leverage other's distributed scenarios vis-a-vis synergistic applications. Proactively implement bricks-and-clicks.</p>
  <p>Authoritatively build effective networks rather than transparent ideas. Monotonectally pontificate high-quality content whereas world-class schemas. Distinctively leverage other's distributed scenarios vis-a-vis synergistic applications. Proactively implement bricks-and-clicks.</p>
  <p>Authoritatively build effective networks rather than transparent ideas. Monotonectally pontificate high-quality content whereas world-class schemas. Distinctively leverage other's distributed scenarios vis-a-vis synergistic applications. Proactively implement bricks-and-clicks.</p>
  <p>Authoritatively build effective networks rather than transparent ideas. Monotonectally pontificate high-quality content whereas world-class schemas. Distinctively leverage other's distributed scenarios vis-a-vis synergistic applications. Proactively implement bricks-and-clicks.</p>
  <p>Authoritatively build effective networks rather than transparent ideas. Monotonectally pontificate high-quality content whereas world-class schemas. Distinctively leverage other's distributed scenarios vis-a-vis synergistic applications. Proactively implement bricks-and-clicks.</p>
</div>

<div id=overlay></div>

＆＃13;

为什么文本/按钮会在页面加载（Chrome）上跳转？

3 个答案: