Question

我想要做的是在真实图像完全加载之前显示占位符图像。我找到了答案here。我使用与接受的答案完全相同的代码。这个答案对于正常情况非常有用。

但是，我的情况有点不同。在我的页面上，我有两个标签。我使用ion-slide-box进行标签选择。当用户切换标签时，我会加载不同的内容。在每个标签下，它是一个很长的项目列表。每个项目都有一个图像，我在其上实现了这个占位符图像显示方法。用户可以向下滚动以查看更多项目。因此，当用户向下滚动时，我会加载更多项目。

以下是我的代码，它已经简化了：

HTML：

<div class="tab-bar">
<div class="tab-option" ng-class="(slide == 0 ? 'active' : '') ng-click="setSlide(0)">
    Tab 1
</div>
<div class="tab-option" ng-class="(slide == 1 ? 'active' : '') ng-click="setSlide(1)">
    Tab 2
</div>

<ion-view>
<ion-content>
    <div class="list">
        <ion-slide-box on-slide-changed="slideHasChanged($index)" active-slide="slide">
            <ion-slide>
                <ion-list ng-repeat="item in items">
                    My content and Image Here
                    <img hires="{{item.realImageUrl}}" src="placeholderImage.jpg"/>
                </ion-list>
            </ion-slide>
            <ion-slide>
                <ion-list ng-repeat="item in items">
                    My content and Image Here
                    <img hires="{{item.realImageUrl}}" src="placeholderImage.jpg"/>
                </ion-list>
            </ion-slide>
        </ion-slide-box>
    </div>
</ion-content>

在我的控制器中（这简化了很多，我不想打扰不相关的代码）：

slideHasChanged = function (index) {
    getMoreItems(); //get more data from server here.
};

这是指令：

app.directive('hires', function() {
    return {
        restrict: 'A',
        scope: { hires: '@' },
        link: function(scope, element, attrs) {
            console.log('link fired');
            element.one('load', function() {
                console.log('load fired');
                element.attr('src', scope.hires);
            });
        }
     };
});

问题是，占位符图像在我第一次来到此页面并加载第一批项目时效果很好。但无论何时我需要向下滚动或切换标签，占位符图像都不再起作用。行为是，它始终显示占位符图像，真实图像在完全下载/加载后不会显示。

我不知道是因为这种方法只在你加载页面时有效吗？并且因为切换标签或向下滚动不会触发页面加载而无法正常工作？如果我希望这对我的情况有用，那么这种方法需要做哪些改变？

我在我的指令中添加了两条调试信息，我注销了“已触发”＃39;并且＆＃39;加载'＃39;事实证明链接功能被正确触发，只是element.one('load', function())没有被触发。这个范围不知何故不匹配吗？有什么想法吗？

我一直在尝试代码。实际上，当我切换标签或向下滚动时，它有时会起作用。但大部分时间都不起作用。这很令人困惑，我不知道为什么它有时会起作用。

Answer 1

我认为你走在正确的轨道上，并且必须尝试在物品实际可见时进行操作。这里有一个名为InView的指令：https://github.com/thenikso/angular-inview。我有一个类似的问题，我有这个书签，但它在我的待办事项列表中相当远。

Answer 2

试试这个指令：

app.directive('hires', function() {
return function(scope, element, attrs) {
        attrs.$observe('hires', function(value) {
        element.attr({
            'src': value
        });
    });      
  };
});

在这里使用$ observe的行为很像ng-src。

Answer 3

所以我最终得到了正确的方法，只需将指令的link函数更改为：

link: function (scope, element, attrs) {
    if (scope.hires != element.attr('src')) {
        element.attr('src', scope.hires);
    }
}

摆脱element.one。这就是它只能运作一次的原因。

指令不会触及AngularJS

3 个答案: