时间戳

首页 > 解决方案 > jQuery load() 函数正在延迟加载元素

html - jQuery load() 函数正在延迟加载元素

问题描述

我希望我问得正确，我正在创建一个网站并为我的导航栏和页脚保存了一个 HTML 和 CSS 文件。

我正在尝试从网站上的不同页面加载这些文件。

我的索引页面没有加载任何内容，它在 index.html 和 index-style.css 中有导航栏和页脚。

但是，当我在其他页面上使用加载功能时，会出现某种延迟，您可以在页面的左上角看到某种“跳转”，您可以在其中看到 HTML 半秒钟，然后是导航栏和页脚已加载。

这就是我的代码的样子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" type="image/png" href="../images/logo/soup.png">
    <title>Souplease - Gallery</title>
    <link rel="stylesheet" type="text/css" href="../css/gallery-style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    <!--Font Awesome-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <script src="https://kit.fontawesome.com/44f557ccce.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
</head>
<body>
    <!-- Navigation Bar -->
    <nav class="load-navbar"></nav>

<!-- more code here -->

    <!-- Footer -->
   <footer id="load-footer"></footer>
   <script type="text/javascript">
        $(document).ready(function() {
            $(".load-navbar").load("navbar.html");
            $("#load-footer").load("footer.html");
        });
    </script>
    </body>
</html>

您还可以查看此短视频以更好地了解问题。注意屏幕的左上角

标签： htmljquerycss

解决方案

load()总是异步执行的，所以它会像你在视频中看到的那样被绘制，没有办法使用 jquery 的 load() 来改变它。

如果你真的想使用它，我会使用某种过渡或加载元素。

另一方面，我永远不会在我自己的项目中加载这样的组件，即使不优雅，我也宁愿使用 iframe，至少它会在页面绘制时加载（或尝试）。

推荐阅读