與指令圖像閃爍來檢查圖像丟失

Question

我寫了一個指令，將替換丟失（404），圖像與圖像佔位符，如果它不存在，像這樣....

app.directive('onErrorSrc', function($q) { 
    return { 
     link: function(scope, element, attrs) { 

      function isImage(src) { 

       var deferred = $q.defer(); 

       var image = new Image(); 
       image.onerror = function() { 
        deferred.reject(false); 
       }; 
       image.onload = function() { 
        deferred.resolve(true); 
       }; 
       image.src = src; 

       return deferred.promise; 
      } 

      isImage(attrs.myNgSrc).then(function(test) { 
       attrs.$set('src', attrs.myNgSrc); 
       console.log("IS IMAGE"); 
      }, function (err) { 
       console.log("IMAGE ERROR"); 
       attrs.$set('src', attrs.onErrorSrc); 
      }); 
     } 
    } 
}); 

..雖然這對於加載一次的靜態頁面非常有用，但對於每隔幾秒刷新一次的表中檢查圖像都不太正確。每次刷新時，表中的任何缺失（404）圖像都會導致閃爍。

我原本就是根據實際元素的錯誤行事，但我認爲這樣會嘗試先加載，失敗，然後替換圖像。我認爲這樣，它至少不會嘗試先將圖像加載到DOM中，然後失敗，但是找出代碼中缺少的圖像，然後分配正確的圖像。看來我錯了！

我知道我正在設置src而不是ngSrc，我無法獲得ngSrc的工作。

任何人都可以提供任何建議/援助？非常感謝。

Answer 1

試試這個指令：

app.directive('checkImage', function ($http) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      attrs.$observe('ngSrc', function (ngSrc) { 
       $http.get(ngSrc).success(function() { 

       }).error(function() { 
        //Image doesn't exists!. To do anything... 
       }); 
      }); 
     } 
    }; 
}); 

HTML：

<img check-image ng-src="{{urlImg}}/> 

---

或者你可以嘗試這個錯誤處理程序指令：

app.directive('errSrc', function() { 
    return { 
     link: function (scope, element, attrs) { 
      element.bind('error', function() { 
       if (attrs.src != attrs.errSrc) { 
        attrs.$set('src', attrs.errSrc); 
       } 
      }); 
     } 
    } 
}); 

HTML：

<img ng-src="{{urlImg}} err-src=""/>