Question

我正在建立一个包含许多子页面的网站。我发现，除了重复出现在所有站点上的代码（例如navbar），我还可以使用jQuery load（）函数和加载模板。我为此使用以下代码：

        $(function(){
        $("#includeHeader").load("partials/header.html"); 
        });

        $(function(){
             $("#includeNavbar").load("partials/navbar.html"); 
        });
        $(function(){
        $("#includeKontakt").load("../partials/kontakt.html", function(){
            $('.carousel').carousel();
            }); 
        });
        $(function(){
        $("#includeFooter").load("partials/footer.html");

问题是，当我刷新页面时，网站正在“跳转”。 “静态”内容-首先加载以html编写的内容。之后，将加载网站的其余部分，包括来自load（）函数的部分内容。子项将“静态”内容压低，并导致不必要的“跳跃”效果。您可以在此链接中查看行为： http://progresstal.hexagonwebdev.vxm.pl/index.html（请刷新几次以查看）。

我试图将以上代码包装在window.onload中，以使页面完全加载并在之后显示，但这无济于事：

        window.onload = () => {
        $(function(){
          $("#includeHeader").load("partials/header.html"); 
        });

         $(function(){
             $("#includeNavbar").load("partials/navbar.html"); 
        });
        $(function(){
        $("#includeKontakt").load("../partials/kontakt.html", function(){
            $('.carousel').carousel();
            }); 
        });
        $(function(){
        $("#includeFooter").load("partials/footer.html"); 
    });
    }

实现网站一次显示所有内容（无跳跃）的目标的最佳方法是什么？如果没有其他解决方法，保持计时器可能会有所帮助...但是如何应用呢？

如何同时显示从jQuery load（）函数加载的html内容和动态内容？

0 个答案: