如何使用内嵌Javascript的延迟 [英] How to use defer for inline Javascript

问题描述

我正在用Laravel在PHP中开发一个网页。我想为我的javascript文件使用属性延迟或异步，但我有一些问题。
在每个文档中，我加载一个包含以下内容的标头：

  {{Html :: script（'js / jquery 。's'，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'））}} 
 
 <！ -  Funciones  - > 
 {{Html :: script（'js / funciones.js'，array（'defer'=>'defer'））}} 
  

如果我给它们赋予异步属性，则它们不能正常工作，因为它们中的一些是模块化的。
所以我尝试了defer属性，我没有这个问题，但现在我遇到了内联javascript的问题，因为它调用了头的函数。 （这是在页面的底部）。

 < script type =text / javascript> 
 
 window.addEventListener（'popstate'，function（e）{
 eval（document.getElementById（script_biblioteca）。innerHTML）; 
}）; 
 
 
 //后退/前进的脚本
 section ='biblioteca'; 
 url_section ={{Request :: root（）}} /+ section +/; 
 
 activar_menu（'＃menu_biblioteca'）; 
 buscador（'＃dinamic_search'，'#main'，section）; 
 
< / script> 
  

和错误：
$ b $

  ReferenceError：$未定义
 ReferenceError：未定义activar_menu 
  

<我怎样才能解决这个问题？
而且，我正确使用defer属性？

解决方案

一个选项是连接所有脚本一个使用Gulp的脚本。

这样你就不会有这个问题，也不必打开多个浏览器连接来下载多个js文件。

gulp concat脚本？

当您尝试使用Jquery但尚未加载时，您也会收到以下消息：

<$ p $ ReferenceError：$未定义


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?

解决方案

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

这篇关于如何使用内嵌Javascript的延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！