使用$ ImageCacheFactory

Question

我使用离子框架创建了一个移动应用程序。它包含许多图像。我需要加载所有图像而没有闪烁。所以我使用$ImageCacheFactory通过引用blog预加载所有图像

我使用下面的代码。问题是app包含100 png个图片，所以我必须引用所有的png文件。

.run(function($ImageCacheFactory) {
    $ImageCacheFactory.Cache([
        "img/user.png", 
        "img/profile.png",
        "img/logo.png",
        "img/splash.png", 
        "img/map.png", 
        "img/shop.png",
        "img/country.png", 
        "img/place.png"
      ]).then(function(){
         console.log("Images done loading!");
      },function(failed){
          console.log("Error..!!!");
    });
})

是否有任何简单的方法可以使用单行代码引用所有png图像（所有图像都在www/img文件夹中）。谢谢

Answer 1

按如下方式创建角度工厂

.factory("$fileFactory", function($q) {

  var File = function() {};

  File.prototype = {

    getEntries: function(path) {
      var deferred = $q.defer();
      window.resolveLocalFileSystemURI(path, function(fileSystem) {
        var directoryReader = fileSystem.createReader();
        directoryReader.readEntries(function(entries) {
          deferred.resolve(entries);
        }, function(error) {
          deferred.reject(error);
        });
      }, function(error) {
        deferred.reject(error);
      });
      return deferred.promise;
    }

  };

  return File;

});

然后使用getEntries()

获取所有文件的列表

.run(function($ImageCacheFactory, $ionicPlatform, $fileFactory ) {
  var fs = new $fileFactory();
  $ionicPlatform.ready(function() {
    fs.getEntries('img').then(function(result) {
      var files = result;
      files = files.unshift({
        name: "[parent]"
      }).map(function(i, v) {
        return 'img/' + v.name;
      });
      $ImageCacheFactory.Cache(files).then(function() {
        console.log("Images done loading!");
      }, function(failed) {
        console.log("Error..!!!");
      });
    })
  });
});

您需要安装依赖项 Apache Cordova File

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git

参考： Helpful tutorial

Answer 2

对不起，我还没回答。但我知道它为什么不起作用。

使用网络浏览器

不要这样做。如果您甚至尝试在Web浏览器中打开此项目，那么您就是在为自己设置失败。此应用程序使用Web浏览器不熟悉的本机设备插件。反过来，这将带来陌生感和错误。