0

我正在做一个小向导/调查，AngularJS其中将数据加载到变量中，$scope.styles. 我在这里设置了一个 plunkr 以便于使用：

http://plnkr.co/edit/1S542YE7xlO2P4zyhzu0?p=preview

很简单。我将每个对象依次展示给用户，它会加载相关的图像并为用户显示它们。单击它在下一个画廊中加载的图像底部的“是/否”。这里的刷新之间有很大的延迟（Plunkr 似乎加载它的速度很快，但在我的生产服务器上不是这种情况，所以它更加明显）这导致窗口大小以及所有内容暂时小得多下面的ng-repeat跳转到屏幕的顶部。

防止这种情况发生的最好方法是什么？CSS是这里唯一的解决方案吗？

4

2 回答 2

1

您的问题是<img>元素的大小为 0，直到用户的浏览器加载图像文件。尝试将图像标签更改为<img ng-src="{{img}}" width="100" height="100"/>，您会发现不再闪烁。如果可能，让服务器将这些属性与图像 url 数据一起返回。

于 2013-10-28T03:49:36.613 回答
0

您可以将高度添加到图像包装器 div（ style="height:300px" ，或者更好地，作为一个类）。

这样，当图像发生变化并且图像少于三行时，包装器将保持固定大小。

于 2013-10-28T10:14:04.207 回答