Question

我有以下元素，只需更改播放和暂停按钮点击之间的背景图像。

<i ng-class="butcheck ? 'icon icon-share-link3-active' : 'icon icon-share-link3'" class="icon icon-share-link3" style=""></i>

然而，第一次点击Play会触发样式更改，并且需要一些时间来显示暂停背景，感觉转换之间存在间隙。

有没有办法为这个特定情况预加载Pause背景图片？我看到它需要174毫秒（大小：292 B）。

总之，真的不希望用户体验这种差距。记住任何最佳做法？我的解决方案解决方案如下，但感觉不对。

 <div id="preload" class="icon-share-link3-active" style="display:none">
 </div>

它有助于提前加载样式。

Answer 1

查看此示例，图片已预加载，只有z-index

的播放

＆＃13;

/* Styles go here */
#d-1{
  background-image:url('http://s3.amazonaws.com/rackcdn.kikvid.com/videos/09ba8757a890bb15e26494b5c40fd207/thumbnails/thumb_2_1280x720.jpg');
  background-size:cover;
  min-height:300px;
  width:100%;
  text-align:center;
  position:fixed;
  top:0;
  left:0;
}
#d-2{
  background-image:url('http://s3.amazonaws.com/rackcdn.kikvid.com/videos/68b50e453cedd89674f3337ef7f3eda3/thumbnails/thumb_0_1280x720.jpg');
  background-size:cover;
  min-height:300px;
  width:100%;
  text-align:center;
  position:fixed;
  top:0;
  left:0;
}
body *{
  color:#fff;
}
.z-1{
  z-index:-2; 
}
.z-2{
  z-index:-1; 
}
button{
  color:#000;
}

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="myCtrl">
    <div>
      <div id="d-2" ng-class="d2?'z-2':'z-1'"></div>
      <div id="d-1" ng-class="d1?'z-2':'z-1'"></div>
      <h3>my block</h3>
      <p>my paragraph</p>
    </div>
    <button ng-click="toggle()">toggle</button>
    <script>
      var app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope) {
          $scope.d1 = true;
          $scope.d2 = false;
          $scope.toggle = function(){
            $scope.d1 = !$scope.d1;
            $scope.d2 = !$scope.d2;
          }
      });
    </script>
  </body>
</html>

＆＃13;

延迟：切换样式（背景图像）Angular ng-class

1 个答案: