javascript - js异步加载与DOM的执行顺序,打包js。(不用gulp和webpack)
代言
代言 2017-06-30 09:58:30
0
2
806

目的:

想要把,项目中所有页面通用的资源,例如:reset.css,jq-ui.css,jq.js等,全部打包在一个js里面,可以叫初始化js,以后新页面就可以只引用这个js即可。

现状:

index.html

  //所有页面通用  //所有页面通用  //单独这个页面的css   //页面代码…… //页面代码……   //所有页面通用  //单独这个页面的js

想要改成:

index.html

  //只保留单独这个页面的css   //页面代码…… //页面代码……   //想要封装好通用init的js,以后可以通用  //只保留单独这个页面的js

init.js

(function(){ var reset_css = document.createElement('link'), jq_js = document.createElement('script'); //加载通用的css reset_css.href = "css/reset.css"; //加载通用的js jq_js.src = "js/jq.js"; }())

问题:

页面资源加载顺序问题

  1. 其中reset.css必须在最开始加载。----实际情况,DOM渲染完了才加载的,没用了

  2. jq.js,因为所有页面的js依赖jq,必须jq先加载完后,再加载页面的js。----实际情况,页面js先加载了,报错了。

求教:

  1. 如果想实现上述想要的结果,应该怎么写,能保证请求外部src,href资源按照想要的顺序加载呢?就是依赖的必须css,js必须在页面的js执行之前,加载完后再执行。

  2. 有查过文件监听事件、onload,但是我页面中通用的东西有点多,怎么样写保证全部初始化资源加载完后再去加载呢?

common_file1.onload = function(){ common_file2.onload = function(){ common_file3.onload = function(){ return } return } //再去加载每个页面中的单独需要资源吗? 这样写感觉好傻 /(ㄒoㄒ)/~~ }
代言
代言

全部回复 (2)
扔个三星炸死你

不知道你打包是采用gulp还是webpack, 可以试着引入gulp-order类似的插件

    给我你的怀抱

    我大概记得就是按照顺序打包。就好了。

      最新下载
      更多>
      网站特效
      网站源码
      网站素材
      前端模板
      关于我们 免责声明 Sitemap
      PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!