Javascript 网站内容在某些页面上垂直移动_Javascript_Html_Css_Squarespace

Javascript 网站内容在某些页面上垂直移动

javascript html css

Javascript 网站内容在某些页面上垂直移动,javascript,html,css,squarespace,Javascript,Html,Css,Squarespace,我正在利用Squarespace为我妻子的生意建立一个新网站。别告诉她，因为这是她的圣诞礼物之一然而，我遇到了一个奇怪的问题。该网站上大约有一半的页面包含来自称为Healcode的第三方小部件的内容。在pageload上，这些页面有一种奇怪的不稳定感，徽标和导航栏在其中移动——最终在正确的位置结束，但这样做时看起来很糟糕。没有第三方小部件的页面不会出现这种急促页面抖动的示例：不抖动的页面示例： Healcode小部件是如下所示的javascript代码： <script type="

我正在利用Squarespace为我妻子的生意建立一个新网站。别告诉她，因为这是她的圣诞礼物之一

然而，我遇到了一个奇怪的问题。该网站上大约有一半的页面包含来自称为Healcode的第三方小部件的内容。在pageload上，这些页面有一种奇怪的不稳定感，徽标和导航栏在其中移动——最终在正确的位置结束，但这样做时看起来很糟糕。没有第三方小部件的页面不会出现这种急促

页面抖动的示例：不抖动的页面示例：

Healcode小部件是如下所示的javascript代码：

<script type="text/javascript">
  healcode_widget_id = "ay12237c4nc";
  healcode_widget_name = "schedules";
  healcode_widget_type = "mb";
  document.write(unescape("%3Cscript src='https://www.healcode.com/javascripts/hc_widget.js' type='text/javascript'%3E%3C/script%3E"));
  // Healcode Schedule Widget for Conscious Conditioning L.L.C. : Weekly Schedule New
</script>
<noscript>Please enable Javascript in order to get <a href="https://www.healcode.com" target="_blank">HealCode</a> functionality</noscript>

任何帮助都将不胜感激。提前谢谢你

您可以隐藏页面，直到正文加载：

另外，document.write是您的最佳解决方案吗？

不要尝试使用document.write，如果可能，请与document.write一样。write JS解析器不知道将其放在哪里。充其量，浏览器会忽略它。最坏的情况是，它可能会写在当前文档的顶部。使用appendChild

发生抖动效果是因为healcode在页面完全加载之前加载了脚本。如果可能，将所有Java脚本放在body标记之后，而不是head

正如google所建议的那样，您是否在页面开始处加载此javascript？由于javascript是同步加载的，因此可能会导致抖动。老实说，我所做的就是将粘贴到问题中的代码注入页面上的适当位置。我不明白为什么widget内容会导致上面的div移动。因此，我的问题是，在没有移动的页面上，元素底部有一个内联样式：116px，它阻止内容区域移动。尝试禁用JavaScript来调试问题；它与第三方内容无关。嗯，我没看到这个。这两页都有这样一句话：谢谢你的帮助。我尝试了这个，但它导致healcode javascript无法执行。

<body style = 'display: none'; />

healcode_widget_id = "ay12237c4nc";
  healcode_widget_name = "schedules";
  healcode_widget_type = "mb";
  document.write( unescape("%3Cscript src='https://www.healcode.com/javascripts/hc_widget.js' type='text/javascript'%3E%3C/script%3E"));
  // Healcode Schedule Widget for Conscious Conditioning L.L.C. : Weekly Schedule New

window.onload = function()
 {
   document.body.style.display = 'block';
 };

function loadHealCodeScript () {

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://www.healcode.com/javascripts/hc_widget.js' 
    document.body.appendChild(script);

}

window.onload = loadHealCodeScript; // load healcode after page has been loaded