0

I have a lot of scripts and styles in head tag and sometimes they don't load properly. Here's how my head looks like:

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="w3.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,500,1,0" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
    integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">-->
  <script src="index.js"></script>
  <title>NCA</title>
</head>

However when I reload my page, everything works properly and my js gets applied on my php exactly the way I want... Can you tell what's going on and why the first time I load my page, my js doesn't work properly? Note that: I can't do $(document).ready(function () { ... }); as there are many functions in my index.js file and also I want to force the body load after head is loaded... Is there any way to do it?

aditya panchal
  • 19
  • 11
  • 1
    Script elements block rendering unless you use `defer` … but you don't. I can't reproduce the problem. – Quentin Jul 20 '22 at 15:07
  • 1
    See [this answer](https://stackoverflow.com/questions/10808109/script-tag-async-defer) - `script` without defer/async are *blocking* - your page will not continue until the script has been *parsed*. It's unclear what you mean by "loaded" as there's a difference between retrieved/parsed/executed (each of which could be considered "loaded"). If your `index.js` has any sort of "setTimeout" or async code then that will run later. – freedomn-m Jul 20 '22 at 15:07

2 Answers2

1

I had a similar problem tha I solved using defer after the script src, example:

 <script src="demo_defer.js" defer></script>

https://www.w3schools.com/tags/att_script_defer.asp

Rodrigo Martello
  • 11
  • 1
  • 2
    That does the opposite to what the question is asking. It will **stop** the script from blocking the load of the body. – Quentin Jul 20 '22 at 15:06
1

It is a good practice to put the script tags after the body tag, to ensure that the body its the first thing to load, it doesn't work that way with the css because you want the css to load first

gbo2600
  • 73
  • 5