延遲：切換樣式（背景圖像）Angular ng-class

我有以下元素以簡單地更改播放和暫停按鈕上的點擊之間的背景圖像。延遲：切換樣式（背景圖像）Angular ng-class

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

然而，在播放第一次點擊觸發式的變化，它需要多一點的時間，以顯示暫停背景，感覺好像有過渡之間的間隙。

有沒有什麼辦法預先加載這個特定情況下的Pause背景圖片？我看到它需要174ms（大小：292 B）。

總之，真的不希望用戶體驗到這種差距。任何最佳實踐？我的解決方法如下，但感覺不對。

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

它有助於提前加載樣式。

來源

2017-07-17 shamaleyte

看看這個例子，圖像和預裝僅僅z-index

/* 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; 
 
}

<!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>

有的玩

來源

2017-07-17 13:31:32

延遲：切換樣式（背景圖像）Angular ng-class

回答

相關問題