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'
    }
}]);

maps.html加载svg图像

<svg-map></svg-map>

因此，当我访问maps.html时，需要很长时间才能加载。

Answer 1

在预加载器中，您正在调用.preloadImages( imgs )，但您的图片位于var img。另外，尝试在服务器端gzip你svg（如果还没有）。

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

1 个答案: