我正在使用 ng-click 更改 span 标签的背景图像。第一次更改图像时,加载需要一两秒钟。但是然后在图像之间来回交替是完美的。两个图像都是约。 500 字节,所以我认为大小不是问题。
我正在为移动设备开发一个 Angular 应用程序。在我的 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;
}
这只是移动问题还是我使用了错误的指令?
最佳答案
我认为这不是 Angular 或指令本身的问题。有很多事情会影响性能。如果您相信您的设备可以顺利运行,您可以通过 Chrome 调试器中的时间轴检查引擎盖下发生的事情。
此外,您不应依赖 Chrome 模拟器的性能,因为它无法反射(reflect)这一点。它对 html/css 部分很有用。
关于css - Angular ng-class加载背景图片速度慢?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22781364/