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

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

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

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

这个工作，但因为我已经加载了我的CSS这样(它是一个webfont CSS)我的页面字体隐藏在android手机，他们只显示当我触摸屏幕。

在页面加载后加载css和JS是一个不好的方式吗?有没有更好的办法?

你可以有条件地在JavaScript中包含一个脚本文件

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

真正的问题是为什么你的JavaScript和CSS文件加载缓慢?是因为它们包含大量代码，还是外部站点上的引用文件需要时间加载?如果你可以重构这些来加快它们的加载速度，那么最好的做法当然是将它们加载到页面的<head>中。

你可以试着把你的样式表分成两部分，webfont声明等放在一个小的CSS文件中，你在页面的顶部加载，在第二个文件中加载额外的可选的CSS规则，在页面呈现后加载。

然而，我建议你不要在页面呈现后加载CSS规则，原因很简单，如果你在CSS规则中定义了位置或大小，这可能意味着页面中的元素会被移动。在页面呈现之前加载CSS始终是最佳实践，这样用户就不会看到浏览器加载、解析和呈现CSS规则时的零碎内容。

css以异步方式加载，所以问题是真正的js.
首先，你应该把它放在页面的底部，但你真的需要在页面的头部和主体上，以防止它阻塞渲染添加一个async属性:

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

相关内容

最新更新

热门标签：