首頁 > web前端 > js教程 > 用ocLazyLoad如何實現js延遲載入?

用ocLazyLoad如何實現js延遲載入?

零下一度
發布: 2017-07-18 17:48:29
原創
1299 人瀏覽過

ocLazyLoad說明

1.ocLazyLoad是AngularJS的第三方函式庫,可實現模組、控制器及其他所依賴的動態載入/按需載入

#2 .$ocLazyLoad.load()支援多個文件,可以自訂指定文件類型,可以自訂指定是否緩存在客戶端

3.有問題,$ocLazyLoad.load(),傳回動態類型$ $state,對於js檔案不存在或載入失敗還沒有找到相關處理的api

 最近開發一個系統遇到了一個問題,用angular路由一個html片段,該片段需要使用一個js插件來實作一個富文本編輯器。關鍵問題在於片段載入後必須透過js與dom元素進行綁定。一開始想當然以為直接把js程式碼寫在程式碼片段裡不久ok了,然而經過實驗,路由將html片段插入頁面時只能讀取css,無法解析並執行js程式碼。

  google了半天發現了很多angular+requireJs的解決方案,但我覺得對於我這個場景並不適合,因為requirejs本質是一個模組加載器,按需加載只是他的副業,我們用它應該主要是用它來做模組化的,如果我們單純為了按需加載卻要試用模組化語法包裝我們的程式碼(define),感覺有點像用大砲打蚊子,對於我這種需求來說代價巨大。

  最後決定使用ocLazyLoad來處理,因為此方案優點是,簡單易行無侵入。同時這個方案有些缺點,例如每次動態載入所需的腳本、模版資源會有很多不必要的網路開銷,路由定義比較複雜(多了一些配置項,其實不能算複雜,而是繁瑣),對於大型複雜業務應用,路由眾多,耗費的精力不可忽視。但是用在我這個場景之中正合適。於是便在github上fork下js,引進到專案中。

 <script src="js/ocLazyLoad.js?1.1.11"></script>
登入後複製

  在需要用到的angular模組裡進行設定

var app = angular.module(&#39;formCtrlParts&#39;, [&#39;oc.lazyLoad&#39;]);
登入後複製

再向路由需要用到的控制器裡面使用此服務進行js檔案的按需載入


app.controller(&#39;addNewBlogCtrl&#39;,function($scope,$http,$ocLazyLoad){
    $ocLazyLoad.load(&#39;../html/ckeditorjs/ckeditor.js&#39;);
   
})
登入後複製

這樣基本上就大功告成,ocLazyLoad有很多種載入方式,也可以配合路由,指令進行載入。     

#

以上是用ocLazyLoad如何實現js延遲載入?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板