Question

Estoy desarrollando una web en PHP con Laravel. Quiero usar el atributo defer o async para mi javascript, pero tengo unos cuantos problemas. En todos los documentos cargo un header que contiene:

{{ 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')) }}

{{ 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')) }}

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

Les he dado el atributo async pero no funciona bien porque algunas funciones necesitan de otras en otros archivos. Por lo que he usado el atributo defer con el que no tengo ese problema, pero ahora el problema lo tengo con el inline javascript porque llaman a funciones que estan en el header. (Este código esta al final de la pagina)

<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>

Y el error:

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

¿Como puedo solucionarlo?
¿Estoy usando correctamente el atributo "defer"?

Answer 1

Basicamente el atributo defer cuenta al navegador no procesar hasta que la pagina este completamente cargada, pero no funciona con etiquetas script inline. podrias intentar poner tu codigo inline en un script aparte o.. podrias hacer algo asi:

<script type="text/javascript">
    document.onreadystatechange = function(){

        if( document.readyState == 'complete' ) {

            alert('procesando despues de carga...');
            // tu codigo aca
        }
    }
</script>