JQuery *sometimes* loading too late: $ is not defined

I am using JQuery to load a page via the following syntax

$(function(){
  $("#navbarImport").load("/navbar/navbar.html"); 
});

to load the content of navbar.html into a in a target html file. However, this works about half the time – refreshing the page causes the navbar to load half the time, otherwise it will give me

“Uncaught ReferenceError: $ is not defined”.

The same error occurs respectively if I replace “$” with “jQuery”. The above code snippet is my entire js file.

When importing the scripts, I import the JQuery script first. In the target html file, my scripts are structured as such:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="./my_script.js"></script>