GIF animé vs performance des animations jQuery

Je suis en train de construire un site qui a un tas de carrousels [sur orbite] (sur une seule page), et chaque carrousel aura un bouton lecture/pause. Le concepteur souhaite que le bouton de pause sur les carrousels pulsent (c'est-à-dire, changent l'opacité de 80% à 100% et redescendent à 80% et gardent cette boucle en boucle). Je pensais que les gifs animés seraient moins un coup de performance que d'utiliser jquery, car nous avons plus de 10 carrousels sur la page (ne demandez pas pourquoi). Je veux savoir si j'ai raison.GIF animé vs performance des animations jQuery

Le code jquery Je voudrais utiliser serait quelque chose comme ça (je ne l'ai pas codé, donc ne pas l'esprit les erreurs de syntaxe):

function pb_animate() { 
     $('.pausebutton').animate({opacity:0.8}, 300[ms], function() { 
      $('.pausebutton').animate({opacity:1.0}, 300[ms], function() { 
       pb_animate() 
      } 
     } 
    }

Alors, quelle serait mieux dans ce cas: jquery ou gifs animés? Ou est-ce que je ne m'inquiète de rien? Si vous avez une meilleure solution/approche jquery, veuillez l'afficher.

Source

2013-10-17 user2891893

Je voudrais aussi aller avec CSS, voir la réponse @ nietonfir. – Shomz

CSS3 est le chemin à parcourir pour les animations sur le Web. L'exemple suivant permet de basculer l'opacité entre 1 et 0,8 (retiré -{webkit,moz,o}- préfixes pour une meilleure lisibilité):

@keyframes pulse { 
    0%, 100% { 
     opacity: 1; 
    } 
    50% { 
     opacity: 0.8; 
    } 
} 

.pausebutton { 
    animation: pulse 4s infinite; 
}

Ou voir ce jsBin. (Oui, les boutons de pause/lecture peuvent aussi être faits en CSS.)

Source

2013-10-17 20:17:34 nietonfir

@matewka Non seulement il répond, mais il montre aussi la solution la plus rapide et la moins performante pour les animations web: CSS3! – Shomz

C'est vrai. Je n'ai juste pas remarqué de description de cette solution. Il n'y a même aucune information que ce soit CSS. Comment le PO devrait maintenant cela? – matewka

@matewka Je vois ce que vous voulez dire. Bien que, strictement parlant, je verrais une réponse comme celle-ci plutôt comme une opportunité de recherche/connaissance, d'autant plus que deux commentaires disent que c'est une excellente solution. Encore une fois, tout le monde n'est pas comme ça, et je suis d'accord avec beaucoup de gens comme si tout était servi dans une assiette. – Shomz

ma réponse est, ça dépend, beaucoup de carrousels si contenant beaucoup d'images causerait trop de demandes au serveur ce qui entraînera une réduction massive dans le temps de chargement de la page, bien sûr je ne compte pas les tailles d'image, si c'est du texte, ça pourrait être un peu moins, le code jquery que vous utilisez est bon, une autre suggestion est le code css3 de @ nietonfir il vient aux demandes de serveur, je vous suggère de lire ceci: Group Multiple Images into One Request and Response car il augmentera considérablement la vitesse si vous utilisez beaucoup d'images, j'espère que cela a répondu à votre question.

Source

2013-10-17 20:23:58

GIF animé vs performance des animations jQuery

Répondre

Questions connexes