关于jquery：动态导入样式表和javascript


Import stylesheets and javascript on the fly

我有一个网站，它的导航都是通过Ajax(使用jquery)完成的；每个页面都动态加载到页面上的一个元素中。虽然我有一个通用样式表和JS脚本，但每个页面也有一个页面特定的样式表和JS脚本。加载这些页面特定的脚本和样式表最有效的方法是什么？在页面加载时，大多数页面特定的脚本/样式表将不需要。只有当用户(通过Ajax)加载特定页面时，才需要页面的脚本/样式表。我应该在页面加载时加载每个脚本和样式表吗？

另一种选择是在动态加载页面时，简单地将适当的和元素附加到头部；但是，是否调用它们？另外，当调用不同的页面(通过Ajax)时，是否需要删除和元素？对于脚本，我可以使用jquery的.getScript()函数。在效率和跨浏览器支持方面，最好的方法是什么？

谢谢您！

相关讨论

JS和CSS是一次性加载的，并且是浏览器缓存的(也取决于服务器配置)

所以如果您有一个Ajax，只包含1个JS。你可以

  • 在主页的底部插入这个JS(懒惰的加载；先发制人的思考..更快的第2页)

  • 将includeJS标记与Ajax响应一起带来。(这里没什么复杂的。浏览器发出新的JS调用)

  • 将所有JS/CSS组合成一个组合的JS，将其推到主页标题标签(关注性能和缓存)

  • 准备好文档后，按照建议使用getscript()执行类似于1的操作。

    • 相关讨论

    在我评论你可以用CSS做什么之前。

    这就是您如何使用JS的方法：

    1
    2
    3
    4
    5
    6
    7
    var script = document.createElement('script');
    script.src ="path to your src";
    // load event
    script.onload = function () {
        //some staff
    };
    document.head.appendChild(script);

    另外，对于你，我建议你读一下这个要点。

    另一个好消息。

    好吧，我知道有一种方法可以做到这一点，那就是使用Requirej，但是缺点是所有的JS都需要定义为AMD。

    不知道你是否知道RequireJS，但它是一个非常整洁的库，您可以将其想象为依赖注入器，并以异步方式加载文件。如果您感兴趣，可以查看他们的文档：

    • 简介
    • CSS