Rails有助于更快地从底层加载javascript



我遇到了这个问题,我得到了一些显示flexibg图像的javascript。它只有在页面底部才有效。就在之前

问题是javascript被加载为最后一个。我可以看到灵活的bg图像只是散布愿望是不好的。

我的代码:

<%= javascript_include_tag 'flexibg.js' %>
</body>

我该怎么做才能使flexi-bg-javascript作为第一个或更快地加载?

编辑:

我已经移动了body标记顶部的javascript,它仍然有效。但它非常慢。

好的,要理解您的问题,您需要对页面加载方式有基本的了解。简短的(不是100%准确,但足够好)解释是,浏览器从页面的顶行开始一行接一行地浏览。当它击中每个脚本标记时,它会加载它(并且在完成之前不会移动到其余的行,这就是为什么将脚本标记放在底部被认为是最佳实践的原因)。

一旦浏览器(在它看来)有足够的渲染值,它就会开始渲染它所拥有的。很可能这就是导致您出现问题的原因:浏览器最初加载的图像具有错误的维度,只有当JS加载/运行时,才会设置正确的维度。

要解决这个问题,您必须首先隐藏整个页面,然后在加载页面后显示它。基本上你想做一些事情的效果:

<script src="yourFile.js"/> <!-- This could go at the end -->
<body id="theBody" style="display:none"> <!-- rest of document --></body>
<script>document.getElementById("theBody").style.display = "";</script>

这样,浏览器将命中BODY标记和后续内容,但由于display:none样式,它不会渲染任何内容。然后,当浏览器到达末尾时,它将命中删除display:none样式的脚本标记,显示页面。

这只是一个快速的例子,有些细节可能会被忽略(例如,我认为在body标记之后不允许使用脚本标记),但希望你能理解。如果没有,请发表评论,我将尝试进一步解释。

相关内容

  • 没有找到相关文章

最新更新