寫一個移動端顯示圖片列表的web,以往都是使用jQuery的延遲加載插件來實現這一功能的,但是現在要求不能使用jQuery以及其他插件,僅使用angularjs實現這個功能。圖片的路徑是儲存在一個json中,透過讀取json的資料ng-repeat出來的。
請問有什麼好的解決方法?
仅有的幸福2017-05-15 16:53:49
https://github.com/Treri/me-lazyload
https://github.com/Treri/me-lazyimg
兩個功能差不多, 前面那個是放在document中滾動的, 後面那個是可以設置在一個element中滾動的
我想大声告诉你2017-05-15 16:53:49
思路:
1,圖片的src 不要使用真實的地址,用一個屬性保存在元素上
2,把所有需要使用延遲載入的圖片放到一個陣列中,
3,初始化的時候檢查數組中的元素是否在視覺範圍內,可視範圍內即載入
4,給 window 綁定滾動事件檢查圖片是否在可視範圍內
5,載入完成的圖片從佇列中刪除
原文連結:https://www.npmjs.com/package/angular-imglazyload
阿神2017-05-15 16:53:49
jquery的做法是監聽window.scroll,然後判斷圖片的位置,是否需要切換src屬性,那麼angular也一樣,只是由於angular需要將DOM操作寫在指令裡面,所以需要你自己去實現指令,大概思路如下;
html
<lazyload> <img data-source="real.png" src="holder.png" /> </lazyload>
javascript
angular.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屬性這一層就行了,只是這樣會註冊和圖片一樣多的事件回調