Question

我正在使用Squarespace为我妻子的业务建立一个新网站。不要告诉她，因为这是她的圣诞礼物之一。：）

但是，我遇到了一个奇怪的问题。该网站上大约一半的网页包含来自名为Healcode的第三方窗口小部件的内容。这些页面在页面加载时有一个奇怪的急动，徽标和导航栏四处移动 - 最终在正确的位置收尾，但看起来很糟糕。没有第三方窗口小部件的页面没有这种急动。

抓狂的页面示例：https://coconditioning.squarespace.com/yoga-classes/
不抖动的页面示例：https://coconditioning.squarespace.com/private-coaching/

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>

任何帮助都会非常感激。提前谢谢！

Answer 1

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

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

在您的javascript中，添加window.onload()：

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';
 };

另外，document.write()是最适合您的解决方案吗？

Answer 2

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

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

由于healcode在页面完全加载之前加载其脚本，因此发生了抖动效应。如果可能的话，将所有javascripts放在body标签之后而不是head

正如google所建议的那样https://developers.google.com/maps/documentation/javascript/tutorial?hl=en#asynch

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

2 个答案: