jQuery load() function is loading elements with delay

Question

I hope I am asking it correctly, I am creating a website and saved an HTML and CSS files for my navbar and footer.

I am trying to load those files from different pages on the site.

My index page isn't loading anything, it has the navbar and footer inside the index.html and index-style.css.

However, when I am using the load function on the other pages there is some kind of delay and you can see on the top left side of the page some kind of a "jump" where you see the HTML for half a second then the navbar and footer are loaded.

This is how my code looks like:

<!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>

You can also check this short video to understand the problem better. Pay attention to the top left side of the screen

1) review [jquery load](https://api.jquery.com/load/) 2) debug by watching the network tab in the browser to see what it's doing. 3) if you don't want FOUC (the flash) then don't use jquery doc.ready — fdomn-m
– fdomn-m, Commented Feb 2, 2021 at 19:21
The doc.ready says: when everything else has finished drawing run this... and the run this is .load() which says: start a new request to the server to load content. — fdomn-m
– fdomn-m, Commented Feb 2, 2021 at 19:22
Set a default height on the nav bar and footer so the height does not change — epascarello
– epascarello, Commented Feb 2, 2021 at 21:21

1x2x3x4x · Accepted Answer · 2021-02-02 22:08:16Z

0

The load() will always execute asynchronously, so it'll get painted as you see it in the video, there's no way to change that using jquery's load().

If you really want to use it though, I'd use some kind of transition or loading element.

On the other hand I would never load components like that on a project of my own, I'd rather use an iframe even if not elegant, at least it'll load (or try) as the page is painted.

edited Feb 2, 2021 at 22:08

answered Feb 2, 2021 at 19:21

1x2x3x4x

6049 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

fdomn-m Over a year ago

It's not so much that it's async, it's that it doesn't even start until the rest of the page has finished (due to doc.ready)

1x2x3x4x Over a year ago

True also, didn't even look at the ready() part.

Ron Swanson Over a year ago

I was given the instruction to use the load function. so I didn't have a choice here :( May I ask for an example of a transition in the loading element? I am sorry, I am really new to all of this

1x2x3x4x Over a year ago

If that's the case then have a read here, it's pretty easy: stackoverflow.com/questions/10913895/…

1x2x3x4x Over a year ago

And also this for transition specifically: stackoverflow.com/questions/40459986/…

|

Collectives™ on Stack Overflow

jQuery load() function is loading elements with delay

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related