angular.js - angularjs如何實作圖片延遲載入？

Question

寫一個移動端顯示圖片列表的web，以往都是使用jQuery的延遲加載插件來實現這一功能的，但是現在要求不能使用jQuery以及其他插件，僅使用angularjs實現這個功能。圖片的路徑是儲存在一個json中，透過讀取json的資料ng-repeat出來的。
請問有什麼好的解決方法？

Answer 1

https://github.com/Treri/me-lazyload
https://github.com/Treri/me-lazyimg

兩個功能差不多, 前面那個是放在document中滾動的, 後面那個是可以設置在一個element中滾動的

Answer 2

思路：
1，圖片的src 不要使用真實的地址，用一個屬性保存在元素上
2，把所有需要使用延遲載入的圖片放到一個陣列中，
3，初始化的時候檢查數組中的元素是否在視覺範圍內，可視範圍內即載入
4，給 window 綁定滾動事件檢查圖片是否在可視範圍內
5，載入完成的圖片從佇列中刪除

原文連結：https://www.npmjs.com/package/angular-imglazyload

Answer 3

jquery的做法是監聽window.scroll，然後判斷圖片的位置，是否需要切換src屬性，那麼angular也一樣，只是由於angular需要將DOM操作寫在指令裡面，所以需要你自己去實現指令，大概思路如下；

html<lazyload>
    <img data-source="real.png" src="holder.png" />
</lazyload>

javascriptangular.module('yourapp').directive('lazyload', function () {
  return {
    restrict: 'EA',
    replace: false,
    link: function (scope, element, attrs) {
      angular.element(window).on('scroll', function() {
        // 计算距离 切换img属性
      });
    }
  };
});

如果希望效率像jquery一樣，只有一個監聽，那麼這個lazyLoad的邏輯需要考慮如何查詢IMG
如果希望簡單省事，指令直接寫在img屬性這一層就行了，只是這樣會註冊和圖片一樣多的事件回調

Answer 4

http://afklm.github.io/ng-lazy-image/ 這個module很多人都做好了 這個連結的看起來不錯 使用很方便

Answer 5

應該是用$timeout來延遲載入