我使用ng-click更改span标记的背景图像。在第一次更改图像时,需要一两秒钟才能加载。但是然后在图像之间来回交替是完美的。两张图片都是约。 500字节,所以我不认为尺寸是个问题。
我正在开发适用于移动设备的角度应用。在我的Chrome中的移动模拟器中,图像加载完美。仅在移动设备上才会出现问题。
<div class="data_table" ng-click="collapsed = !collapsed">
<table>
<tr class="top_row">
<td>
<div>
Data
</div>
</td>
<td>
<span ng-class="!collapsed ? 'collapse_icon' : 'expand_icon'"></span>
</td>
</tr>
</div>
.collapse_icon {
font-size: 22px;
line-height: 18px;
font-weight: bold;
float:left;
width: 5%;
color: #000;
height: 22px;
width: 22px;
background-image: url(../images/collapse2.png);
background-repeat: no-repeat;
background-size: 22px 22px;
padding-right: 2px;
}
.expand_icon {
font-size: 22px;
line-height: 18px;
font-weight: bold;
float:left;
width: 5%;
color: #000;
height: 22px;
width: 22px;
background-image: url(../images/expand2.png);
background-repeat: no-repeat;
background-size: 22px 22px;
padding-right: 2px;
}
这只是一个移动问题,还是我使用了错误的指令?
答案 0 :(得分:1)
我不认为这是角度或指令本身的问题。有很多事情会影响性能。如果您认为您的设备可以顺利运行,您可以通过Chrome调试器中的时间轴检查引擎盖下发生的情况。
此外,您不应该依赖Chrome的模拟器来提高性能,因为它没有反映出来。它对html / css部分很有用。
答案 1 :(得分:1)
问题在于ng-model绑定,你不应该依赖Chrome的模拟器来提高性能,因为它没有反映出来。它对html / css部分很有用。