如何在 Ionic 视图中预加载 SVG？

Question

我用 Ionic 构建了一个移动应用程序，在我的一个视图中，我有一个 202KB 的 SVG 图像

问题是加载该视图/页面需要很长时间。加载和显示视图最多需要 3-4 秒。有什么方法可以更快地加载 svg？

我尝试提前将svg和html视图添加到Cache中：

$ionicTemplateCache('img/image.svg');
$ionicTemplateCache('views/maps.html');

我还尝试了一个预先加载图像的预加载工厂，但这也没有帮助。

var img = ['image.svg'];

//load all the images
preloader.preloadImages( imgs ).then(function() {
  // Loading was successful.
  console.log(" Loading was successful.");
}, function() {
  // Loading failed on at least one image.
  console.log("Loading failed on at least one image.");
});

下面是我的应用的样子：

Angular 指令是 svg 图像：

app.directive('svgMap', [function () {
    return {
      restrict: 'E',
      templateUrl: 'img/image.svg'
    }
}]);

加载svg图像的maps.html

<svg-map></svg-map>

所以，当我转到 maps.html 时，加载需要很长时间。

Answer 1

在预加载器中，您调用的是.preloadImages( imgs )，但您的图像在var img 中。另外，尝试在服务器端对你的 svg 进行 gzip 压缩（如果还没有的话）。