javascript - 如何在正文元素的末尾动态添加脚本标签

Question

我想删除渲染阻塞 javascript。所以，我试图在页面加载后在元素script末尾动态添加标签。body

我有 7 个script要动态添加的标签。其中一个script标签jQuery使用 CDN 加载。其余 6 个script标签加载依赖于jQuery.

我已将所有指向 javascript 文件的链接放在一个数组中，然后使用循环创建一个script元素，在其上添加所需的属性并将其附加到body元素中。

问题：

问题是当我在浏览器中查看页面时，我在控制台中收到有关jQuery未定义的错误。

我正在script以正确的顺序添加标签，并且我已经验证script标签确实添加在body元素的末尾并以正确的顺序添加。

jQuery每次初始加载时都会出现此问题，如果我刷新页面，则有时脚本会正确加载，有时我会遇到未定义的相同错误。

由于这个问题，网页上的一些动画没有被触发，而且我正在使用slick轮播。当 javascript 没有正确加载时，所有应该在slick轮播中显示的图像都会一个接一个地显示。

问题：

为什么jQuery依赖于的其他脚本jQuery执行时未定义？script在中动态添加标签的正确方法是html什么？

代码：

这就是我script在html. 所有脚本都是从本地文件系统加载的，除了jQuery通过slick carouselCDN 加载的脚本。

<script>
  function loadJs() {
    const arr = [
      "https://code.jquery.com/jquery-3.3.1.min.js",
      "//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js",
      "./js/jquery.waypoints.min.js",
      "./js/jquery.counterup.min.js",
      "./js/wow.min.js",
      "./js/lazysizes.min.js",
      "./js/loso.js",
    ];

    for (let srcLink of arr) {
        let script = document.createElement("script");

        script.setAttribute("type", "text/javascript");
        script.setAttribute("src", srcLink);

        document.body.appendChild(script);
    }
  }

  window.addEventListener("load", () => {
    loadJs();
  });
</script>

标签： javascripthtmljquery

Answer 1

@Nick 我发现了一些问题，希望对您有所帮助。

1. 在加载 js 和 css 文件的数组中，您错过了 https:// 光滑轮播 js 和 css 文件

2. 当您尝试使用这样的计时器加载 js 时

   for (let srcLink of arr) {
     setTimeout(() => {
       let script = document.createElement("script");
       script.setAttribute("type", "text/javascript");
       script.setAttribute("src", srcLink);
       document.body.appendChild(script);
     }, 100);
   }
   

文件将一个接一个地加载，因此我们不会出错。错误的发生取决于您的互联网连接速度，因此通过这种加载文件的方式，我们可以避免错误

正如您在图片中看到的那样，加载文件时没有发现任何问题，已经刷新了几次并检查了。

3. 如果您尝试在没有计时器的情况下加载文件，将根据您的互联网连接速度导致问题。

如您所知，我们在控制台中遇到错误。

尝试

• 加载带有普通脚本标签的文件
• 使用计时器加载文件。