Verzögerung: Toggle-Stil (Hintergrundbild) Angular ng-Klasse

Ich habe das folgende Element, um einfach das Hintergrundbild zwischen Klicks auf Wiedergabe- und Pause-Schaltflächen zu ändern.Verzögerung: Toggle-Stil (Hintergrundbild) Angular ng-Klasse

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

jedoch der erste Klick auf Play löst den Stil zu ändern, und es dauert ein wenig Zeit, um die Pause Hintergrund zu zeigen, die fühlt sich an wie eine Lücke zwischen dem Übergang ist.

Gibt es eine Möglichkeit, das Pause-Hintergrundbild für diesen speziellen Fall vorab zu laden? Ich sehe, dass es 174ms (Größe: 292 B) dauert.

In der Summe, möchte wirklich nicht, dass der Benutzer diese Lücke erleben. Beliebige Best Practice? Meine Workaround-Lösung ist wie folgt, fühlt sich aber nicht richtig an.

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

Es hilft, den Stil im Voraus geladen werden.

Quelle

2017-07-17 shamaleyte

Schauen Sie sich dieses Beispiel Bilder sind vorgespannt und nur einige Spiel 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>

Quelle

2017-07-17 13:31:32

Verzögerung: Toggle-Stil (Hintergrundbild) Angular ng-Klasse

Antwort

Verwandte Themen