Js is able to execute only after page loads all elements
Question
I have a problem with my javascript. It only only load and can execute the scripts after the page loads all the others elements..
For example, on my menu-mobile, i can only hit the hamburguer-menu only after the page loads all others elements.. causing a "delay" for the user.
My structure of the head is that:
<head>
<meta charset="UFT-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title><?= $config['head']['title']; ?></title>
<link rel="shortcut icon" href="<?= $config['head']['icon-Path']; ?>" type="image/png">
<link rel="stylesheet" type="text/css" media="screen and (min-width: <?= $config['layout']['small']['0']; ?>px) and (max-width: <?= $config['layout']['small']['1']; ?>px)" href="/styles/small.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: <?= $config['layout']['medium']['0']; ?>px) and (max-width: <?= $config['layout']['medium']['1']; ?>px)" href="/styles/medium.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: <?= $config['layout']['medium-large']['0']; ?>px) and (max-width: <?= $config['layout']['medium-large']['1']; ?>px)" href="/styles/medium-large.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: <?= $config['layout']['large']['0']; ?>px)" href="/styles/large.css">
<link rel="stylesheet" href="/styles/owl.carousel.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/js/scripts.js"></script>
<script src="/js/main.js"></script>
</head>
Anyone could help me? thank you.
1 answers
solution1
0 2021-04-18 16:19:16
Try add async to scripts that you want to load immediately
Let me know if that helped
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Execute JS only after the entire page loaded
Execute script after page loads in javascript/jquery
How to execute javascript function from code-behind but only after the page loads
Click on span elements that is added after page loads
Is there a way to hide all contents of a page and only show them after the page completely loads?
AngularJS: Controller loads only after page refresh
Jquery function only loads after page refresh
Script only loads after page refresh
Chrome extension loads only after refresh of the page
How to correctly run JS after page loads
Related Tags