首頁  >  問答  >  主體

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

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

某草草某草草2736 天前846

全部回覆(5)我來回復

  • 仅有的幸福

    仅有的幸福2017-05-15 16:53:49

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

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

    回覆
    0
  • 我想大声告诉你

    我想大声告诉你2017-05-15 16:53:49

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

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

    回覆
    0
  • 阿神

    阿神2017-05-15 16:53:49

    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屬性這一層就行了,只是這樣會註冊和圖片一樣多的事件回調

    回覆
    0
  • 天蓬老师

    天蓬老师2017-05-15 16:53:49

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

    回覆
    0
  • 淡淡烟草味

    淡淡烟草味2017-05-15 16:53:49

    應該是用$timeout來延遲載入

    回覆
    0
  • 取消回覆