2017-04-11 103 views
0

我正在開發一個使用Cordova的應用程序,但沒有使用Angular,因爲應用程序需要非常快(只有純JS和JQuery)。使用cordova.file加載下載的圖像

的應用目前需要的文件數量較大的工作如此的,而不是把它們作爲資產,產生了沉重的應用程序(1 GB以上的.apk文件),他們使用科爾多瓦下載文件夾中的cordova.file.dataDirectory內文件夾,因此可以在Android和iOS中以某種方式引用它們。

的問題是,圖像都被定義在整個項目以這種方式(玉):

img(src="assets/icons/back.svg" width="20" height="20") 

或(筆)

.main 
    background url("assets/images/bg.png") 

所以,問題是:

  • 有沒有方法可以加載codova.file.dataDirectory中的所有圖像,而不改變.jade和.styl文件的路徑定義?
  • 如果這是不可能的,有沒有辦法改變所有.jade和.styl文件的方式,他們默認從該文件夾加載圖像? (比如用「/ file/in/cordova/assets/[whatever]」替換所有的「assets/[whathever]」)
  • 如果這也是不可能的,那個目錄?
+0

如果這個文件,你需要的是所有圖像,你根本無法把他們在公衆的HTML文件夾,並加載它們使用html。所以你不必做一個解決方法。 – mtizziani

+0

@mtizziani他們不是,有更多的文件類型。此外,AFAIK無法使用Cordova下載到公共HTML文件夾,因爲該文件夾是隻讀的:https://github.com/apache/cordova-plugin-file。另外,如果我將它們放在HTML文件夾中,然後構建應用程序,那麼.apk權重將超過1GB。 – Potray

+0

我通過api將所有圖像加載爲base64和ajax請求。所以我沒有與應用程序大小的問題。和我只加載我需要顯示的圖像 – mtizziani

回答

0

我解決了我的問題,通過使用JQuery改變背景圖像的所有div的CSS。這是解決方案的一部分(我模糊的部分代碼):

${'div'}.each(function(index, div){ 
 
    var backgroundImage = $(div).css('background-image') 
 
    $(div).css('background-image', processBackgroundImage(backgroundImage)); 
 
}) 
 

 
${'img'}.each(function(index, img){ 
 
    img.src = cordova.file.dataDirectory + processImageSrc(img); 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>