国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - js異步載入與DOM的執(zhí)行順序,打包js。 (不用gulp和webpack)
代言
代言 2017-06-30 09:58:30
0
2
968

目的:

想要把,專案中所有頁面通用的資源,例如:reset.css,jq-ui.css,jq.js等,全部打包在一個js裡面,可以叫初始化js,以後新頁面就可以只引用這個js即可。

現(xiàn)況:

index.html

<head>
    <link href = "css/reset.css">  //所有頁面通用
    <link href = "css/jq-ui.css">  //所有頁面通用
    <link href = "css/index.css">  //單獨這個頁面的css
<head>

<body>
    //頁面代碼……
    //頁面代碼……
</body>

<srcipt src="js/jq.js"></script>  //所有頁面通用
<srcipt src="js/index.js"></script>  //單獨這個頁面的js

想要改成:

#index.html

<head>
    
    <link href = "css/index.css">  //只保留單獨這個頁面的css
<head>

<body>
    //頁面代碼……
    //頁面代碼……
</body>

<srcipt src="js/init.js"></script>  //想要封裝好通用init的js,以后可以通用
<srcipt src="js/index.js"></script>  //只保留單獨這個頁面的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. #如果想要實現(xiàn)上述想要的結(jié)果,該怎麼寫,能保證請求外部src,href資源按照想要的順序載入呢?就是依賴的必須css,js必須在頁面的js執(zhí)行之前,載入完後再執(zhí)行。

  2. 有查過檔案監(jiān)聽事件、onload,但是我頁面中通用的東西有點多,怎麼樣寫保證全部初始化資源加載完後再去加載呢?

common_file1.onload = function(){
    common_file2.onload = function(){
        common_file3.onload = function(){
                return
        }
        return
    }
    
    //再去加載每個頁面中的單獨需要資源嗎?  這樣寫感覺好傻 /(ㄒoㄒ)/~~
    }
代言
代言

全部回覆(2)
扔個三星炸死你

不知道你打包是採用gulp還是webpack, 可以試著引入gulp-order類似的插件

給我你的懷抱

我大概記得就是按照順序打包。就好了。

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板