Angular JS custom directive not working on iOS devices - ios

Question

I have deployed my app on Azure, I have a C# backend and AngularJS front end.
I am using a custom directive (called bgSrc) which sets the image source based on the given url (either a background-image or a src) depending on which element the directive is used.
Here is the directive:
app.directive('bgSrc', ['preloadService', function (preloadService) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.hide();
preloadService(attrs.bgSrc).then(function (url) {
if (element[0].tagName === 'DIV' || element[0].tagName === 'MD-CONTENT' || element[0].tagName === 'MAIN' || element[0].tagName === 'FORM') {
element.css({
"background-image": "url('" + url + "')"
});
element.fadeIn();
}
else if (element[0].tagName === 'IMG') {
attrs.$set('src', url);
element.css({
'display': 'block'
});
element.fadeIn();
}
});
}
};
}]);
Here is my preloadService:
app.factory('preloadService', ['$q', '$rootScope', function ($q, $rootScope) {
return function preload(url) {
var deffered = $q.defer(),
image = new Image();
image.src = url;
if (image.complete) {
deffered.resolve(image.src);
$rootScope.loading = false;
} else {
$rootScope.loading = true;
image.addEventListener('load', function () {
deffered.resolve(image.src);
$rootScope.loading = false;
});
image.addEventListener('error', function () {
deffered.reject();
$rootScope.loading = true;
});
}
return deffered.promise;
};
}]);
Here is an example of how I use it on html.
<div ng-if="!loading" bg-src="assets/build/img/ocean_bg.png">
<form name="model.form" ng-submit="login()" bg-src="assets/build/img/scroll.png">
<h1>Log In</h1>
...
</form>
</div>
It works perfectly well on Chrome and Android but keeps failing on iOS devices. I have pinpointed the issue to be my custom directive, if I remove it the page loads fine, if I include it the page is caught in an endless loop not loading my images and stick in the "$rootScope.loading" state which simply displays a circular progress bar.
Any help on the matter is much appreciated

Answer 1

The issue was in my preloadeService, where the loading of the image was stuck in an infinite loop.