Question

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

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

Answer 1

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

此外，您不应该依赖Chrome的模拟器来提高性能，因为它没有反映出来。它对html / css部分很有用。

Answer 2

问题在于ng-model绑定，你不应该依赖Chrome的模拟器来提高性能，因为它没有反映出来。它对html / css部分很有用。

角度ng级慢加载背景图像？

2 个答案: