angularjs - 在 Angular 中延迟加载图像的最简单方法是什么

Question

我有一个应用程序，允许通过键盘的右/左箭头键对大型文本数据集进行分页。显示的数据还包含图像。

我想在用户快速对数据进行分页时将这些图像的加载延迟 1-2 秒。

一旦用户停在某个页面，所有图像都应该“延迟”加载。

我试图将这个 fiddle 改编到我的应用程序中，但没有成功(见下文)。 http://jsfiddle.net/boneskull/UfrhH/3/

我的 Controller 代码

$scope.delay_images = function() {
$timeout(function() {
    return true;
}, 2000);
};

查看代码

<tbody>
  <tr>
    <td style='text-align:left;padding-right:40px; height:250px;width:{{100 / panel.size}}%' ng-repeat="event in data| slice:panel.offset:panel.offset+panel.size">
    <h4>{{event._source.Price}} {{event._source.Currency}}</h4>
    <img ng-show="delay_images" ng-animate="{show: 'show'}" style='height:100px' ng-src="/img/{{event._source.image_paths}}"/><br /><h6>{{event._source.Title}}</h6>
    <button ng-click="build_search(event._source)" ng-show='event._source.ClusterID' type="button" class="btn btn-primary">More like this</button> 
    </td>
  </tr>
</tbody>

我是 angular.js 的新手，所以非常感谢任何可以指导我走向正确方向的提示。

谢谢!

更新

这是基于已接受答案的部分工作代码。顺便说一句，它还实现了 keydownevent 的延迟。

现在代码使用 ng-show 来隐藏和显示图像。我意识到这种做法是有问题的，因为它会在用户分页时在后台触发大量图像资源请求。

因此最好的办法是以某种方式将当前解决方案与替换 src= 属性的第二个解决方案结合起来。

我该怎么做？我正在从周围的 div 捕获 keydownevent，所以我无法直接处理图像。有没有办法用angular js访问一类元素？就像 jquery 选择器一样？

var lastFire = 0;
$scope.changeIndex = function($event) {

    if($event.keyCode == 37 || $event.keyCode == 39){

    var cFire = new Date();
    // cancel old timeout
    if ($scope.panel.timeoutId) {
        $timeout.cancel($scope.panel.timeoutId);
    }

    // $event.keyCode...
    if ((cFire - lastFire) / 1000 > 0.3){  

        // hide images to start with
        $scope.panel.imagesVisible = false;


        if ($event.keyCode == 37 && $scope.panel.offset > 0){
        $scope.panel.offset = $scope.panel.offset - 10;
        //$scope.get_data();
        lastFire = cFire;
        $scope.panel.timeoutId = $timeout(function() {
            $scope.panel.imagesVisible = true;
            $scope.panel.timeoutId = undefined;
        }, 1000);

        }
        if ($event.keyCode == 39 && $scope.panel.offset < $scope.data.length - 10){
        $scope.panel.offset = $scope.panel.offset + 10;
        //$scope.get_data();
        lastFire = cFire;
        $scope.panel.timeoutId = $timeout(function() {
            $scope.panel.imagesVisible = true;
            $scope.panel.timeoutId = undefined;
        }, 1000);
        }

    }
    else{
        $scope.panel.timeoutId = $timeout(function() {
            $scope.panel.imagesVisible = true;
            $scope.panel.timeoutId = undefined;
        }, 1000);
    }

}


};

Answer 1

我会制作一个自定义指令。这是我的头脑，未经测试，但这样的事情应该有效:

myApp.directive('ngSlowSrc', function($timeout){
return{
    restrict: 'A',
    link: function(scope, element, attrs){
        $timeout(function() {
            element.src = attrs.ngSlowSrc;
        }, 2000);
    }
}
});

现在只需像这样进行图像调用:<img ng-slow-src="myimage.jpg" >

它的工作方式是等待 2 秒来设置图像的 src。