Angule.js как повторить изображение до тех пор, пока не будет

Question

Я использую директиву imageloaded для затухания изображений при их загрузке.

app.directive('imageloaded', [ 

    function() { 

     'use strict'; 

     return { 
      restrict: 'A', 

      link: function (scope, element, attrs) { 
       var cssClass = attrs.loadedclass; 

       element.bind('load', function (e) { 
        angular.element(element).addClass(cssClass); 
       }); 
      } 
     } 
    } 
]); 

используется

константы выглядит

<img ng-src="{{preview.display_url}}" class="animation-fade" imageloaded 
          loadedclass="animation-faded"/> 

но иногда изображение еще не доступен (например, в очереди для изменения размера), и это занимает несколько секунд для URL, чтобы стать доступным.

Если изображение не загружено, я хочу попробовать перезагрузить его каждые 5 секунд. Я в тупике о том, как это сделать, инкапсулируя его в эту директиву.

Answer 1

Идея состоит в том, чтобы установить таймер таймера, который будет проверяться каждые 5 секунд. Если происходит событие onload, он очистит текущий тайм-аут и добавит класс.

попробовать что-то вроде этого:

app.directive('imageloaded', [ 

    function() { 

     'use strict'; 

     return { 
      restrict: 'A', 

      link: function (scope, element, attrs) { 

       var cssClass = attrs.loadedclass, 
        origSrc, 
        timeout; 

       function reload() { 
        timeout = setTimeout(function() { 
         if (!origSrc) { 
          origSrc = element[0].src; 
         } 
         element[0].src = origSrc + '?' + Date.now(); 
         reload(); 
        }, 5000);  
       } 

       reload(); 

       element.bind('load', function (e) { 
        clearTimeout(timeout); 
        element.addClass(cssClass); 
       }); 
      } 
     } 
    } 
]);