Я знаю, что это проблема, которая возникает снова и снова, но я не могу найти никакого ясного решения.
У меня был статический html / js, который работал нормально (потому что это были только html и js, у скриптов было время для загрузки, и такие вещи, как загрузка тела работали).
Но теперь я пытаюсь экспортировать эту же страницу в приложение Symfony
Так как в моей ветке у меня естьthis
<head>
{% block stylesheets %}
<link href="{{ asset('build/synopsis.css') }}" rel="stylesheet" />
{% endblock %}
{% block scripts %}
<script type="text/javascript" src="{{ asset('build/synopsis.js') }}"></script>
{% endblock %}
</head>
<body onload="drawStars()">
Но теперь очевидно, что функция drawStars загружается недостаточно быстро, чтобы заставить ее работать (или я думаю, что это то, что происходит).
И я получаю
Uncaught ReferenceError: drawStars не определяется при загрузке
Я ищу способ предотвратить генерацию всего моего тела до полной загрузки скрипта.
PS: я знаю, что плохо загружать скрипт в заголовок, потому что это замедляет работу, но есть особый случай, когда вы хотите, чтобы ваш скрипт был сначала полностью загружен. Уже пытался посмотреть с async или defer, но безуспешно. Спасибо за вашу помощь.
РЕДАКТИРОВАТЬ: Вот мой файл synopsis.js
require('../css/synopsis.css');
// Sets the number of stars we wish to display
const numStars = 100;
function drawStars() {
// For every star we want to display
for (let i = 0; i < numStars; i++) {
let star = document.createElement("div");
star.className = "star";
var xy = getRandomPosition();
star.style.top = xy[0] + 'px';
star.style.left = xy[1] + 'px';
document.body.append(star);
}
}
// Gets random x, y values based on the size of the container
function getRandomPosition() {
var y = window.innerWidth;
var x = window.innerHeight;
var randomX = Math.floor(Math.random()*x);
var randomY = Math.floor(Math.random()*y);
return [randomX,randomY];
}
var audio=document.createElement('audio');
var play=true;
function turn(){
if(play){
document.getElementsByClassName('soundOn')[0].innerHTML = "Musique Off";
document.getElementsByClassName('soundOn')[0].style.backgroundColor="red";
audio.src="musique/opening.mp3";
audio.play();
}else{
document.getElementsByClassName('soundOn')[0].innerHTML = "Musique On";
document.getElementsByClassName('soundOn')[0].style.backgroundColor="#4CAF50";
audio.pause();
}
play = !play;
}