使用ng-src防止圖像加載到視口內

我希望能夠防止加載具有ng-src屬性的圖像，直到它在視口中可見爲止。使用ng-src防止圖像加載到視口內

這是可能與Angular？

以前我用過jQuery LazyLoad Plugin，但是我想要做到這一點，而不必同時擁有Angular和jQuery。

這裏有一個解決方案http://stackoverflow.com/questions/15433153/how-to-prevent-ng-src-to-load-image-before - 數據到達 – jdcaballerov

我認爲你可以將源代碼綁定到一個只有當元素可見時才返回值的getter（假設你正在使用某種綁定來觸發img的可見性）。

例如，使用ng-src="{{getImgSource()}}"和控制器：

scope.getImgSource = function(){ 
    if(scope.showImg){ 
     return "myImageUrl.png"; 
    } 
    return ""; 
};

但是，如果是這樣的東西，你將不得不使用了很多，也許你應該考慮創建自己的指令來做到這一點。

2013-08-02 07:53:03 Yann

原來它有點複雜...謝謝你的答案，但:-) –

如果你還有興趣，我發現了這個回購在github上： https://github.com/afklm/ng-lazy-image

我嘗試過了，它的岩石！

只有在出現在視口中時才加載圖像，並且您可以根據屏幕大小選擇要加載的圖像。這意味着你可以爲移動用戶加載較小的圖像;）

2015-07-27 19:10:20 Maxime

我不搖滾 –

回答