1

I am developing a webpage in PHP with Laravel. I want to use the attributes "defer" or "async" for my javascript files, but I have a few problems. In every document, I load a header which contains:

{{ Html::script('js/jquery.js', array('defer' => 'defer')) }}
{{ Html::script('js/bootstrap.min.js', array('defer' => 'defer')) }}

{{ Html::script('js/pjax.js', array('defer' => 'defer')) }}
{{ Html::script('js/jquery.cookie.js', array('defer' => 'defer')) }}
{{ Html::script('js/blur.js', array('defer' => 'defer')) }}
{{ Html::script('js/scrollbar.js', array('defer' => 'defer')) }}

<!--Form-->
{{ Html::script('js/parsley/parsley.remote.js', array('defer' => 'defer')) }}
{{ Html::script('js/parsley/parsley.js', array('defer' => 'defer')) }}
{{ Html::script('js/parsley/es.js', array('defer' => 'defer')) }}
{{ Html::script('js/icheck.js', array('defer' => 'defer')) }}

<!--Funciones-->
{{ Html::script('js/funciones.js', array('defer' => 'defer')) }}

If I give them the attribute async, the don't work properly because some of them are modular. So I've tried with the defer attribute and I don't have this problem, but now I have a problem with the inline javascript, because it calls a function of the header. (This is at the bottom of the page).

<script type="text/javascript">

window.addEventListener('popstate', function(e) { 
    eval(document.getElementById("script_biblioteca").innerHTML);
});


//Scripts on back/forward
section = 'biblioteca';
url_section = "{{Request::root()}}/"+section+"/";

activar_menu('#menu_biblioteca');
buscador('#dinamic_search', '#main', section);

</script>

And the error:

ReferenceError: $ is not defined
ReferenceError: activar_menu is not defined

How can I fix that? And, I am using the "defer" attribute properly?

proyecthd
  • 25
  • 4
  • It's not the same because I cannot use this method. I have a header which I use in every page and on the other side, I have specific functions in each page. So I cannot put the specific function in the top because the top is the same for every page. And also because I load views, and when I load the view of this page I just load the contain of the div main, so I have no access to the rest of the page. – proyecthd Dec 04 '14 at 19:34
  • And the proposed solution doesn't use defer or async so I guess is less "efficient" – proyecthd Dec 04 '14 at 19:37
  • @proyecthd I'm replying late and probably you already found a solution for this, but I added an answer that could help you to the link that jsalonen commented. It wouldn't require to modify anything on the header/footer, and it doesn't need jQuery to be included before the scripts (so no `$ is not defined`) – Alvaro Montoro Apr 16 '15 at 17:02

1 Answers1

0

One option would be to concatenate all scripts in a single script using Gulp.

That way you wouldn't have this problem and also wouldn't have to open multiple browser connections to download multiple js files.

gulp concat scripts in order?

Also you get the message below when you try to use Jquery but it is not loaded yet:

ReferenceError: $ is not defined
Community
  • 1
  • 1
Eduardo Cruz
  • 617
  • 6
  • 18