Angular ng-src is flickering

[kempiloko]

The first three images are flickering when the page is being loading, but after that it is gone. Does anyone know how I can solve this problem? 

<script type="text/ng-template" id="pages/home.html">

<div ng-controller="SlideShowController" ng-switch="slider" class="slideshow-box animate">

<div class="slider-content" ng-switch-when="1">

<img ng-src="{{one}}" class="animate-show" alt="meizu-m3-picture"/>

</div>

<div class="slider-content" ng-switch-when="2">

<img ng-src="{{two}}" class="animate-show" alt="meizu-mx6-picture"/>

</div>

<div class="slider-content" ng-switch-when="3">

<img ng-src="{{three}}" class="animate-show" alt="meizu-m3s-picture"/> 

</div>

</div>

</script>

angular.module("slideshow", ["myApp"])

.controller("SlideShowController", function($scope,  $timeout) {

var slideInSlideshow = 3;

var slideTimeInterval = 4000;

$scope.slider = 1;

var slideTimer =

$timeout(function interval() {

$scope.slider = ($scope.slider % slideInSlideshow) + 1;

slideTimer = $timeout(interval, slideTimeInterval);

}, slideTimeInterval);

var image1 = "image/image01.jpg";

var image2 = "image/image02.jpg";

var image3 = "image/image03.jpg";

var image = {

one: image1, 

two: image2, 

three: image3

};

$scope.image = image;

});

[Sander Elias]

Hi Kempiloko,

What happens is that on the first iteration the images need to get loaded from the server. Once those are in the browsers cache the flickering is gone. It's due to how you structured your template. 

Regards

Sander