Question

我有一个backbone.js应用程序，我的问题是有一些缓慢的加载文件（.css和.js）阻止页面加载，直到它们完全加载。

我想找到一种方法来在渲染骨干视图后延迟这些加载，所以在执行了一些JS之后。我在JS中做到了这一点：

view.render()
$('head').append("<script type=...")
$('head').append("<link rel='stylesheet'...")

这样可行，但由于我已经加载了我这样的CSS（它是一个webfont css），我的页面字体隐藏在Android手机中，只有当我触摸屏幕时它们才会出现。

这是在页面加载后加载css和JS的坏方法吗？还有更好的方法吗？

Answer 1

您可以在JavaScript中有条件地包含脚本文件

if(someConditionIsTrue){
    // load script from the server
    $.getScript( "somePath/onTheServer/script.js", function( data, textStatus, jqxhr ) {
        // do something after the load is complete
    });
}

Answer 2

这里真正的问题是为什么你的JavaScript和CSS文件加载速度慢？是因为它们包含大量代码，或外部站点上的参考文件需要时间加载？如果您可以重构这些内容以加快加载速度，那么当然最好的方法是将它们加载到您网页的<head>。

您可以尝试将样式表分成两部分，在页面顶部加载的小CSS文件中使用webfont声明等，并在页面呈现后加载的第二个文件中添加额外的可选CSS规则

但是，我建议您在呈现页面后不加载CSS规则，原因很简单，如果您定义了位置，可能意味着页面中的元素会被移动或CSS规则中的大小。在呈现页面之前加载CSS始终是最好的做法，这样当浏览器加载，解析和呈现CSS规则时，用户不会看到随处乱动的部分。

Answer 3

css以异步方式加载所以问题实际上是js 首先你应该把它放在你的页面底部，但你真的需要在身体的头部，阻止它阻止渲染添加一个异步属性：

＆LT;脚本类型=＆＃34; text / javascript＆＃34; async src =＆＃34;您的路径＆＃34;＆gt;＆lt; /脚本＆GT;
如果您有多个相互依赖的文件，则可以使用＆LT;脚本类型=＆＃34; text / javascript＆＃34; async defer src =＆＃34;您的路径＆＃34;＆gt;＆lt; /脚本＆GT;
＆LT;脚本类型=＆＃34; text / javascript＆＃34; async defer src =＆＃34;您的路径＆＃34;＆gt;＆lt; /脚本＆GT;
这将在加载后按顺序执行异步文件你可以在这里阅读更多内容：
http://www.w3.org/TR/html5/scripting-1.html#attr-script-async

如何在JS执行后延迟CSS和脚本加载

3 个答案: