个人中心
gpt4 book ai didi

javascript - Bootstrap 可以异步加载吗？

转载 作者：可可西里 更新时间：2023-11-01 02:51:40 25 4
gpt4 key购买 nike

我已经很久没有使用 Bootstrap 了，不确定是否需要在 <head> 中非异步加载它。用于页面构建目的。

Google suggests使用此代码异步加载 JS 文件:

<script type="text/javascript">

 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "deferredfunctions.js";
 document.body.appendChild(element);
 }

 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;

</script>

我可以加载 bootstrap.min.js以这种方式，还是应该以非异步方式加载它？

最佳答案

Bootstrap.js 需要 jquery 才能运行。如果您希望获得加载异步脚本的好处，那么您可能还想异步加载 jquery(以及可能的其他库)......问题是您无法保证 jquery async 在使用上面的示例代码进行 Bootstrap 。我还确定您有自己的 javascript，您想要编写它来使用 bootstrap.js 功能。这意味着更多的依赖。您可以编写逻辑来手动连接依赖项和异步加载，但是随着您可能需要包含的脚本数量的增加，这将成为一项繁重的工作。

Requirejs是一个为您处理所有这些依赖关系管理的库，并且可以异步加载您的文件(并以正确的顺序)。这个库的另一个好处是优化器可以跟踪依赖关系并将它们“刻录”到单个(可选缩小)文件中。在您使用优化器优化您的“主”js 文件(具有页面所需的所有依赖项的文件)之后，requireJS 可以异步加载该文件。只需要包含一个脚本!

一个例子如下:

/app/main.js:

requirejs.config({
    paths: {
        jquery: "lib/jquery-1.11.0",
        bootstrap: "lib/bootstrap"
    },
    shim: {
        bootstrap: {
            deps: ['jquery']
        }
    }
});

//Define dependencies and pass a callback when dependencies have been loaded
require(["jquery", "bootstrap"], function ($) {
    //Bootstrap and jquery are ready to use here
    //Access jquery and bootstrap plugins with $ variable
});

在这种情况下，jquery.js 和 bootstrap.js 将位于/app/lib 下(连同 require.js)。

在您的 HTML 中，您将拥有以下脚本标签:

<script src="/app/lib/require.js" data-main="/app/main"></script>

这将加载 bootstrap 和 jquery(以正确的顺序)，然​​后将这些模块作为参数(只需要 jquery/$，因为 bootstrap 只是 jquery 之上的一个插件)传递给您的回调函数。

关于javascript - Bootstrap 可以异步加载吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24831093/

25 4 0
文章推荐： C# TCP 服务器无法响应客户端
文章推荐： c# - 你能有一个没有线程的 TCP 客户端吗
文章推荐： java - Jamod Modbus Slave - 分配寄存器
文章推荐： java - 如何获取黑白图像的像素值？
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com