使用 $ImageCacheFactory 预加载所有图像

Question

我使用 ionic framework.It 创建了一个移动应用程序，其中包含许多 images.I 需要加载所有图像 flickering.So 我使用 $ImageCacheFactory 预加载所有图像通过参考这个 blog.

我在下面使用 code.The 问题是应用程序包含 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

创建一个angular工厂如下

.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..!!!");
      });
    })
  });
});

您需要安装依赖[=24=]Apache Cordova File

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

参考：Helpful tutorial

Answer 2

抱歉，我还没有答案。但我知道为什么它不起作用。

使用网络浏览器

不要这样做。如果您甚至尝试在 Web 浏览器中打开此项目，您就注定要失败。此应用程序使用 Web 浏览器不熟悉的本机设备插件。反过来这会产生奇怪和错误。

使用 $ImageCacheFactory 预加载所有图像

Preloading all images using $ImageCacheFactory

javascript

regular-language

angularjs

ionic-framework