js в шаблоне

Добрый день, подскажите почему вот этот код js

<div id="my_div"></div>
<script type="text/javascript">
if (window.screen.width < 1000){
$( "#my_div" ).load( "/small.ya" );
}else {
$( "#my_div" ).load( "/big.ya" );
}
</script>

работает только если его вставить в самый низ после?

{template="includeJS" if="theme.js_include == 'footer'" app="core" group="global" location="global" params=""}

если вставить выше он просто перестает работать, хотелось бы засунуть его выше. Можно <div id="my_div"></div> выше, а js в низ но в таком случае код срабатывает уже после загрузки страницы то есть с задержкой, которая не нужна ((