css - Angular ng-class加载背景图片速度慢？

Question

我正在使用 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;
}

这只是移动问题还是我使用了错误的指令？

Answer 1

我认为这不是 Angular 或指令本身的问题。有很多事情会影响性能。如果您相信您的设备可以顺利运行，您可以通过 Chrome 调试器中的时间轴检查引擎盖下发生的事情。

此外，您不应依赖 Chrome 模拟器的性能，因为它无法反射(reflect)这一点。它对 html/css 部分很有用。