Async thread to update img

I’m trying to create a function to update a <img> src. I know i have to use a asynchronous thread (like in java) to keep the UI running while the thread changes the img src, but every implementation I’ve tried freezes the UI

Here’s the code i’ve tried


import { Component, NgZone } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
 @IonicPage()
 @Component({
 	selector: 'page-match-segment',
 	templateUrl: 'match-segment.html',
 })
 export class MatchSegmentPage {

 	rutes: any;
 	rute: any;

 	constructor(public navCtrl: NavController, public navParams: NavParams, public zone: NgZone,) {
 	}

 	ionViewDidLoad() {
 		console.log('ionViewDidLoad MatchSegmentPage');
 		this.rutes = ['./assets/img/banner.png', './assets/img/KC.png']
 		this.changeImg();
 		/*this.zone.runOutsideAngular(() => {
 			this.changeImg();
 		}); */
 		//this.webWorker();
 	}
 	webWorker(){
 		self.addEventListener('install', function(event){
 			var i = 0;
 			this.rute = this.rutes[i]; 
 			while(true){
 				this.rute = this.rutes[i];
 				console.log(this.rute);
 				i++;
 				if(i>=this.rutes.length){
 					i = 0;
 				}
 			}
 		})
 	}
 	async changeImg(){
 		var i = 0;
 		this.rute = this.rutes[i]; 
 		while(true){
 			this.rute = this.rutes[i];
 			console.log(this.rute);
 			i++;
 			if(i>=this.rutes.length){
 				i = 0;
 			}
 		}
 	}
 }

I tried using webWorker, async functions and the Angular zone, but in all the cases it freezes.
Any ideas on what i’m doing wrong? Suggestions for a different approach

Comment for visibility