iOSデバイスで動作しないAngular JSカスタムディレクティブ

Question

私はAzureに自分のアプリケーションをデプロイしました。私はC＃バックエンドとAngularJSフロントエンドを持っています。 ディレクティブが使用されている要素に応じて、指定されたURL（background-imageまたはsrcのいずれか）に基づいてイメージソースを設定するカスタムディレクティブ（bgSrc）を使用しています。ここで

はディレクティブです：ここでは

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

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

は、私は、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> 

これはChromeとAndroidではうまく機能しますが、iOSデバイスでは問題なく動作します。私は自分のカスタムディレクティブであることを特定しました。ページを読み込んだときにページが正常に読み込まれれば、そのページは画像がロードされていない無限ループで捕捉され、単に循環の進捗状況を表示する "$rootScope.loading"バー。

問題上の任意のヘルプは多くの問題は、画像の読み込みが無限ループに陥った私preloadeService、にあった

Answer 1

を高く評価しています。